React Migration in Chart Component

Props: focusBorderWidth, focusBorderColor, focusBorderMargin

Props: focusOutline

In EJ2 React, focus styling was controlled by three separate props. In React, these settings are consolidated into the focusOutline object, where you configure the width, color, and offset in a single prop.

Props: isTransposed

Props: transposed

The isTransposed flag in EJ2 React has been renamed to transposed in React. Set this prop to true to render the chart with the X and Y axes swapped.

API: chartArea={} (object exposed on root component)

API: <ChartArea />

The chart area configuration moves from an inline object chartArea on the <ChartComponent> to a dedicated <ChartArea /> component. Property names (background, backgroundImage, border, margin, opacity, width) remain unchanged and can be directly set as props on <ChartArea />.

Props: titleStyle={{ textAlignment: 'Center' }}

Props: align

Determines the alignment of the title within its container. • Available options: • Left: Aligns the title to the left. • Center: Aligns the title to the center. • Right: Aligns the title to the right.

Props: titleStyle={{ background: '#F4F4F4' }}

Props: background

The background color of the chart title area. Accepts any valid CSS color value.

Props: titleStyle={{ border: { color: '#DDDDDD', width: 1 } }}

Props: border

Defines the border styling for the chart title area.

Props: titleStyle={{ color: '#333333' }}

Props: color

Sets the color of the title. Accepts any valid CSS color string, including hexadecimal and RGBA formats.

Props: titleStyle={{ fontFamily: 'Arial' }}

Props: fontFamily

Specifies the font family used for the title (e.g., 'Arial', 'Verdana', 'sans-serif').

Props: titleStyle={{ size: '18px' }}

Props: fontSize

Sets the font size of the text in pixels.

Props: titleStyle={{ fontStyle: 'Italic' }}

Props: fontStyle

Specifies the font style of the title (e.g., 'Normal', 'Italic').

Props: titleStyle={{ fontWeight: '600' }}

Props: fontWeight

Specifies the font weight (thickness) of the title (e.g., 'Normal', 'Bold', '400').

Props: titleStyle={{ opacity: 0.8 }}

Props: opacity

Sets the opacity level of the title. A value of 1 means fully opaque, while 0 means fully transparent.

Props: titleStyle={{ position: 'Top' }}

Props: position

Determines the position of the chart title relative to the chart area. Available options: • Top: Displays the title above the chart. • Left: Displays the title to the left of the chart. • Bottom: Displays the title below the chart. • Right: Displays the title to the right of the chart. • Custom: Allows manual positioning using x and y coordinates.

Props: title="Sales Overview"

Props: text

Specifies the main title text of the chart. This text provides context or a label for the chart's data.

Props: titleStyle={{ textOverflow: 'Trim' }}

Props: textOverflow

Controls how the title behaves when it overflows its container. Available options: • Wrap: Wraps the text onto a new line. • Trim: Trims the overflowed text. • None: Displays the text even when it overflows.

Props: titleStyle={{ x: 50 }}

Props: x

X-coordinate for positioning the chart title. Only applicable when position is set to Custom.

Props: titleStyle={{ y: 20 }}

Props: y

Y-coordinate for positioning the chart title.Only applicable when position is set to Custom.

API: rows: [{ border: { ... }, height: '50%' }] (array of row objects)

API: <ChartRows> + <ChartRow />

Rows configuration moves from an array of objects on the ChartComponent to dedicated components <ChartRows> and <ChartRow />. Property names (border, height) remain unchanged and can be directly set on <ChartRow />.

API: columns: [{ border: { ... }, width: '50%' }] (array of column objects)

API: <ChartColumns> + <ChartColumn />

Columns configuration moves from an array of objects on the ChartComponent to dedicated components <ChartColumns> and <ChartColumn />. Property names (border, width) remain unchanged and can be directly set on <ChartColumn />.

Props: colorName

Props: colorField

Maps a data source field to assign individual colors to each point in the series.

Props: size

Props: sizeField

Specifies the name of the data field that contains the values used to determine the size (radius) of each bubble in a bubble chart.

Props: tooltipMappingName

Props: tooltipField

Maps a specific field from the data source to use as tooltip content. The mapped field's value is stored in the point's tooltip property and it can be accessed through tooltip format.

Props: xName

Props: xField

Specifies the name of the field in the data source that maps values to the x-axis of the chart. This property is essential for identifying which data dimension should be plotted horizontally, such as categories, timestamps, or numerical values.

Props: yName

Props: yField

Specifies the name of the field in the data source that provides the values to be plotted along the y-axis. This property is used to map vertical data points in the chart, such as numerical values or metrics.

Props: showNormalDistribution

Props: histogramSettings.showNormalDistribution

Indicates whether to display the normal distribution curve for the Histogram series. Default: false.

Props: binInterval

Props: histogramSettings.binInterval

Specifies the bin interval (bin width) used to group numeric values in the Histogram. Default: null (auto-calculated).

Props: showMean

Props: boxAndWhiskerSettings.showMean

Indicates whether the mean value should be calculated and displayed for the Box-and-Whisker series. Default: true.

Props: boxPlotMode

Props: boxAndWhiskerSettings.boxPlotMode

Defines the statistical method used to calculate quartiles and whisker ranges. Options: Exclusive, Inclusive, Normal. Default: Normal.

Props: showOutliers

Props: boxAndWhiskerSettings.showOutliers

Controls whether values outside the whisker range are shown as outliers (rendered as markers). Default: true.

Props: negativeFillColor, summaryFillColor

Props: waterfallSettings.negativeColor, waterfallSettings.positiveColor, waterfallSettings.subTotalColor, waterfallSettings.totalColor

In EJ2 React, Waterfall colors were limited to negativeFillColor and summaryFillColor, where summary covered both subtotal and total.

In React, these are moved into waterfallSettings and expanded into negativeColor, positiveColor, subTotalColor, and totalColor, allowing separate styling for each column type.

Props: intermediateSumIndexes

Props: waterfallSettings.intermediateSumIndexes

Specifies the indexes of data points that should be treated as intermediate (sub-total) sum points. Default: [].

Props: sumIndexes

Props: waterfallSettings.sumIndexes

Specifies the indexes of data points that should be treated as total (final sum) points. Default: [].

Props: connector (connector color/width)

Props: waterfallSettings.connectorLine

Configures the connector line that visually links the columns in a Waterfall chart. Default: { strokeWidth: 1, strokeColor: '#5F6A6A', strokeDasharray: '', strokeOpacity: 1 }.

Props: marker={{ isFilled: true }}

Component Props: filled on <ChartMarker />

Determines whether the marker should be filled with the series color. When set to true, the marker is filled using the corresponding series color, enhancing visual distinction. When set to false, the marker will be rendered with no fill or default styling.

Props: marker={{ allowHighlight: true }}

Component Props: highlightable on <ChartMarker />

When set to true, markers are visually emphasized on hover or selection, enhancing visibility and user feedback during data exploration.

Props: dataLabel={{ rx: 4, ry: 4 }}

Component Props: borderRadius on <ChartDataLabel />

Specifies the horizontal (x) and vertical (y) corner radius for the background of the data label. This controls how rounded the corners of the label background appear.

Props: dataLabel={{ labelIntersectAction: 'Hide' }}

Component Props: intersectMode on <ChartDataLabel />

Specifies how overlapping data labels are handled. Available options: • None - Labels are displayed without overlap. • Hide - Overlapping labels are hidden. • Trim - Truncates labels with ellipsis to avoid overlap. • Wrap - Wraps labels onto multiple lines when space is limited. • Rotate90 - Labels are rotated 90° to reduce overlap.

Props: dataLabel={{ name: 'Category' }}

Component Props: labelField on <ChartDataLabel />

Maps a specific field from the data source to use as the data label content. The mapped field's value is displayed as the label for each data point.

Props: dataLabel={{ angle: 45 }}

Component Props: rotationAngle on <ChartDataLabel />

Specifies the rotation angle (in degrees) for the data label. A positive value rotates the label clockwise, while a negative value rotates it counterclockwise. This property is only effective when enableRotation is set to true.

Props: dataLabel={{ alignment: 'Center' }}

Component Props: textAlign on <ChartDataLabel />

Sets the alignment of the data label relative to the data point. Available options: • Left - Left-aligned. • Center - Center-aligned. • Right - Right-aligned.

Props: primaryXAxis={{ isIndexed: true }}

Component Props: indexed on <ChartPrimaryXAxis />

When set to true, data points are rendered based on their index position rather than their actual x-axis values.

Props: primaryXAxis={{ isInversed: true }}

Component Props: inverted on <ChartPrimaryXAxis />

When set to true, the axis is rendered in reverse order, displaying values from maximum to minimum.

Props: primaryXAxis={{ maximumLabels: 3 }}

Component Props: maxLabelDensity on <ChartPrimaryXAxis />

Specifies the maximum number of labels per 100 pixels of axis length.

API: primaryXAxis={{ majorGridLines: { ... } }}

API: <ChartPrimaryXAxis> + <ChartMajorGridLines />

The major grid lines configuration moves from the inline majorGridLines object inside primaryXAxis to a dedicated <ChartMajorGridLines /> component nested under <ChartPrimaryXAxis />. Property names (color, dashArray, width) remain unchanged.

API: primaryXAxis={{ majorTickLines: { ... } }}

API: <ChartPrimaryXAxis> + <ChartMajorTickLines />

The major tick lines configuration moves from the inline majorTickLines object inside primaryXAxis to a dedicated <ChartMajorTickLines /> component nested under <ChartPrimaryXAxis />. Property names (color, height, width) remain unchanged.

API: primaryXAxis={{ minorGridLines: { ... } }}

API: <ChartPrimaryXAxis> + <ChartMinorGridLines />

The minor grid lines configuration moves from the inline minorGridLines object inside primaryXAxis to a dedicated <ChartMinorGridLines /> component nested under <ChartPrimaryXAxis />. Property names (color, dashArray, width) remain unchanged.

API: primaryXAxis={{ minorTickLines: { ... } }}

API: <ChartPrimaryXAxis> + <ChartMinorTickLines />

The minor tick lines configuration moves from the inline minorTickLines object inside primaryXAxis to a dedicated <ChartMinorTickLines /> component nested under <ChartPrimaryXAxis />. Property names (color, height, width) remain unchanged.

Props: primaryXAxis={{ labelStyle: { textAlignment: 'Center' } }}

Component Props: align on <ChartAxisLabel />

Sets the alignment of the axis label relative to the tick mark. Available options: • Left - Aligns label to the left. • Center - Centers the label. • Right - Aligns label to the right.

Props: primaryXAxis={{ labelStyle: { size: 12 } }}

Component Props: fontSize on <ChartAxisLabel />

Sets the font size of the text in pixels.

Props: primaryXAxis={{ labelFormat: '\${value}' }}

Component Props: format on <ChartAxisLabel />

Used to format the axis label. This property accepts global string formats such as C, n1, P, etc. It also accepts placeholders like {value}°C, where {value} represents the axis label (e.g., 20°C).

Props: primaryXAxis={{ labelIntersectAction: 'Rotate45' }}

Component Props: intersectAction on <ChartAxisLabel />

Defines how overlapping labels on the axis are handled. Available options: • None - No special action for overlapping. • Hide - Hides overlapping labels. • Trim - Trims labels to fit. • Rotation - Rotates labels. • MultipleRows - Places each label on its own row.

Props: primaryXAxis={{ labelPadding: 10 }}

Component Props: padding on <ChartAxisLabel />

Adjusts the vertical spacing between the axis labels and the axis line. A higher value increases the distance, ensuring better readability.

Props: primaryXAxis={{ labelPosition: 'Inside' }}

Component Props: position on <ChartAxisLabel />

Determines the position of the labels relative to the axis line. Available options: • Inside - Positions labels inside the axis area. • Outside - Positions labels outside the axis area. • Auto - Automatically determines the best position based on available space.

Props: primaryXAxis={{ labelRotation: 45 }}

Component Props: rotationAngle on <ChartAxisLabel />

Specifies the angle in degrees to rotate the axis label text. A positive value rotates the label clockwise, and a negative value rotates it counterclockwise.

Props: primaryXAxis={{ titleStyle: { textAlignment: 'Center' } }}

Component Props: align on <ChartAxisTitle />

Sets the alignment of the axis title relative to the axis. Available options: • Left - Aligns title to the left. • Center - Centers the title. • Right - Aligns title to the right.

Props: primaryXAxis={{ titleStyle: { textOverflow: 'Trim' } }}

Component Props: overflow on <ChartAxisTitle />

Controls how the axis title behaves when it overflows its container. Available options: • Wrap: Wraps the text onto a new line. • Trim: Trims the overflowed text. • None: Displays the text even when it overflows.

Props: primaryXAxis={{ titlePadding: 10 }}

Component Props: padding on <ChartAxisTitle />

Specifies the padding between the axis title and the axis labels.

Props: primaryXAxis={{ titleRotation: 45 }}

Component Props: rotationAngle on <ChartAxisTitle />

Defines an angle for rotating the axis title. By default, the angle is calculated based on the position and orientation of the axis.

Props: primaryXAxis={{ title: 'X-Axis Title' }}

Component Props: text on <ChartAxisTitle />

Specifies the text content of the axis title.

API: primaryXAxis={{ stripLines: [{ startFromAxis: true, start: 10, end: 20, size: 5, sizeType: 'Pixel' }] }}

Component Props: Range on <ChartStripLine />

Specifies the range and dimensions of the strip line on the axis. This object defines where the strip line begins, its width or height, and how its size is calculated, forming the core of the highlighted region.

Props: primaryXAxis={{ stripLines: [{ isRepeat: true, repeatUntil: 100, repeatEvery: 10 }] }}

Component Props: repeat on <ChartStripLine />

Configures repeating strip lines that recur at a regular interval. This is useful for highlighting patterns, such as weekends on a date-time axis or alternating bands for every 'n' units on a numeric axis.

Props: primaryXAxis={{ stripLines: [{ isSegmented: true, segmentStart: 0, segmentEnd: 50, segmentAxisName: 'primaryYAxis' }] }}

Component Props: segment on <ChartStripLine />

Configures a segmented strip line that is rendered only within the specified range of another axis. This enables the creation of conditional highlights that are visible only when a data point falls within a specific range on two different axes.

Props: primaryXAxis={{ stripLines: [{ color: '#FF0000', opacity: 0.5, dashArray: '5,5', imageUrl: 'bg.png', border: { color: '#000', width: 2 }, zIndex: 'Over' }] }}

Component Props: Style on <ChartStripLine />

Customizes the visual appearance of the strip line, including its background and border. You can set properties like color, opacity, background images, and dash patterns to make the strip line stand out or blend in with the chart's design.

Props: primaryXAxis={{ stripLines: [{ text: 'Annotation', textStyle: { fontFamily: 'Arial', fontStyle: 'Italic', fontWeight: 'Bold', opacity: 0.8, color: '#000' }, rotation: 45, verticalAlignment: 'Bottom', horizontalAlignment: 'Center' }] }}

Component Props: text on <ChartStripLine />

Configures the text displayed within the strip line. This allows you to add descriptive labels or annotations directly on the highlighted range, with options to control text content, styling, rotation, and alignment.

API: axes: [{}] (array of axis objects)

API: <ChartAxes> + <ChartAxis />

Axes configuration moves from an array of objects on the ChartComponent to dedicated components <ChartAxes> and <ChartAxis>. Sub-components like <ChartAxisLabel /> and <ChartAxisTitle /> can be nested under <ChartAxis /> for detailed styling.

API: legendSettings={} (object)

API: <ChartLegend />

The legend configuration moves from an inline legendSettings object on the ChartComponent to a dedicated <ChartLegend /> component. Changed property names include alignment → align, isInversed → inversed, titleStyle.textAlignment → titleAlign, titleStyle.textOverflow → titleOverflow, and titleStyle.size → fontSize. Other properties like background, border, etc., keep the same names.

Props: legendSettings={{ alignment: 'Near' }}

Props: align on <ChartLegend />

Specifies the horizontal alignment of the legend items. Changed property names include Near → Left, Center → Center, Far → Right. Available options: • Left - Aligns items to the left. • Center - Centers the items. • Right - Aligns items to the right.

Props: legendSettings={{ isInversed: true }}

Props: inversed on <ChartLegend />

When enabled, reverses the order of elements within each legend item. Places text before the shape/symbol instead of the default shape-then-text order.

Props: legendSettings={{ titleStyle: { textAlignment: 'Center' } }}

Props: titleAlign on <ChartLegend />

Sets the alignment of the legend title relative to the legend area. Available options: • Left - Aligns title to the left. • Center - Centers the title. • Right - Aligns title to the right.

Props: legendSettings={{ titleStyle: { textOverflow: 'Trim' } }}

Props: titleOverflow on <ChartLegend />

Controls how the legend title behaves when it overflows its container. Available options: • Wrap: Wraps the text onto a new line. • Trim: Trims the overflowed text. • None: Displays the text even when it overflows.

Props: legendSettings={{ titleStyle: { size: 14 } }}

Props: fontSize on <ChartLegend />

Sets the font size of the legend title in pixels.

API: tooltip={} (object)

API: <ChartTooltip />

The tooltip configuration moves from an inline tooltip object on the ChartComponent to a dedicated <ChartTooltip /> component. Changed property names include header → headerText, enableMarker → showMarker. Other properties like border, fill, opacity, etc., keep the same names.

Props: tooltip={{ header: 'Sales Data' }}

Props: headerText on <ChartTooltip />

Customizes the header text displayed at the top of the tooltip. By default, displays the series name.

Props: tooltip={{ enableMarker: true }}

Props: showMarker on <ChartTooltip />

When set to true, displays colored markers within the tooltip to indicate the corresponding series for each data point.

Props: tooltip={{ textStyle: { size: 14 } }}

Props: fontSize on <ChartTooltip />

Sets the font size of the tooltip text in pixels.

API: zoomSettings={} (object)

API: <ChartZoomSettings />

The zoom settings have moved from the inline zoomSettings object on the ChartComponent to a dedicated <ChartZoomSettings /> component. Some property names have changed: enablePan → pan, showToolbar → toolbar.visible, and toolbarItems → toolbar.items. Other properties, such as mode, remain the same. Note that mode determines which axes are affected (X, Y, or XY).

Props: zoomSettings={{ enablePan: true }}

Props: pan on <ChartZoomSettings />

Enables chart panning without requiring toolbar interaction. When enabled, users can pan a zoomed chart directly by clicking and dragging.

Props: zoomSettings={{ showToolbar: true, toolbarItems: ['ZoomIn', 'ZoomOut', 'Pan'] }}

Props: toolbar object on <ChartZoomSettings />

Provides configuration settings for the zoom toolbar displayed on the chart. Lets you control its visibility, toolbar items, and position within the chart area. Toolbar items like 'ZoomIn', 'ZoomOut', 'Pan', 'Reset' match the available options.

Props: zoomSettings={{ enableMouseWheelZooming: true }}

Props: mouseWheelZoom on <ChartZoomSettings />

Enables chart zooming using the mouse wheel for desktop users. Scroll up to zoom in and scroll down to zoom out.

Props: zoomSettings={{ enablePinchZooming: true }}

Props: pinchZoom on <ChartZoomSettings />

Enables zooming with pinch gestures on touch-enabled devices. Users can pinch in to zoom in and pinch out to zoom out.

Props: zoomSettings={{ enableSelectionZooming: true }}

Props: selectionZoom on <ChartZoomSettings />

Enables zooming by selecting a rectangular region within the chart area. Users can click and drag to define the region they want to zoom into.

Props: stackLabels={{ font: { textAlignment: 'Center' } }}

Component Props: align on <ChartStackLabels />

Sets the alignment of the stack label text within its container. Available options: • Left - Aligns text to the left. • Center - Centers the text. • Right - Aligns text to the right.

Props: stackLabels={{ rx: 4, ry: 4 }}

Component Props: borderRadius on <ChartStackLabels />

Defines the border radius configuration for the stack label background. Controls the curvature of corners for both horizontal and vertical axes.

Props: stackLabels={{ font: { size: '14px' } }}

Component Props: fontSize on <ChartStackLabels />

Sets the font size of the stack label text.

Props: stackLabels={{ angle: 45 }}

Component Props: rotationAngle on <ChartStackLabels />

Specifies the rotation angle of the stack labels in degrees.

API: <SeriesDirective> + <TrendlinesDirective> + <TrendlineDirective>

API: <ChartSeries> + <ChartTrendlineCollection> + <ChartTrendline />

Trendline configuration moves from <TrendlinesDirective> and <TrendlineDirective> in EJ2 React to <ChartTrendlineCollection> and <ChartTrendline /> components in React. Trendlines are nested within the series component. Property names have been updated: fill → stroke.

Props: type

Props: type

Specifies the type of trendline to be rendered.

Available options:

• Linear: A straight line showing the general direction of data.
• Exponential: A curve fitting data with exponential growth or decay.
• Polynomial: A curve fitting data with a polynomial function.
• Power: A curve representing data with a power function.
• Logarithmic: A curve fitting data with a logarithmic scale.
• MovingAverage: Smoothens data using a moving average calculation.

Props: name

Props: name

Display name of the trendline shown in the chart legend.

Props: fill

Props: stroke

Sets the stroke color of the trendline. Accepts any valid CSS color string.

Props: marker

Props: moved to child <ChartMarker /> inside <ChartSeries />

Marker configuration moves from an inline marker object on the series to a dedicated <ChartMarker /> component nested within <ChartSeries />. This separates point styling from trendline configuration.

Property Name Changes: isFilled → filled

Property Name Changes: filled

The isFilled flag in EJ2 React was renamed to filled in Pure React for marker fill control.

API: <ChartComponent> + <IndicatorsDirective> + <IndicatorDirective>

API: <Chart> + <ChartIndicatorCollection> + <ChartIndicator />

Technical indicator configuration moves from <IndicatorsDirective> and <IndicatorDirective> in EJ2 React to <ChartIndicatorCollection> and <ChartIndicator /> components in React. Indicators are nested within the chart component. Property names remain the same across both platforms.

Props: type

Props: type

Specifies the type of technical indicator to be rendered.

Supported indicator types include:

• Sma – Simple Moving Average
• Ema – Exponential Moving Average
• Tma – Triangular Moving Average
• Atr – Average True Range
• AccumulationDistribution – Accumulation / Distribution
• Momentum – Momentum Indicator
• Rsi – Relative Strength Index
• Macd – Moving Average Convergence Divergence
• Stochastic – Stochastic Oscillator
• BollingerBands – Bollinger Bands

Props: seriesName

Props: seriesName

Specifies the name of the source series used for calculating the indicator values.

Props: field

Props: field

Specifies the financial data field used to compare the current value with previous values when calculating technical indicators. This property is applicable to indicators that require price-based comparisons such as RSI, MACD, ATR, and Stochastic.

API: lastValueLabel={} (inline object on series)

API: <ChartLastValueLabel />

Last value label configuration moves from an inline lastValueLabel object on the <SeriesDirective> to a dedicated <ChartLastValueLabel /> component nested within <ChartSeries>. The label is axis-aligned and appears on the chart's axis edge.

Props: enable

Props: enable

Enables or disables the display of the last value label.

Props: lineColor, lineWidth, dashArray

Props: lineStyle

Line styling for connector/grid lines behind the labels. In EJ2 React, these were separate properties (lineColor, lineWidth, dashArray). In React, they are consolidated into the lineStyle object with properties: width, color, and dashArray.

API: scrollbarSettings={} (on each axis)

API: <ChartScrollbar /> (within axis)

Scrollbar configuration moves from inline scrollbarSettings objects on each axis to dedicated <ChartScrollbar /> components nested within <ChartPrimaryXAxis /> or <ChartPrimaryYAxis />. Separate scrollbars can be configured for each axis with independent customization.

API: zoomSettings={{ enableScrollbar: true }}

API: <ChartZoomSettings enableScrollbar />

Enables scrollbar interaction with zoom functionality. This is configured globally on <ChartZoomSettings /> to control whether scrollbar interactions can modify the zoom factor.

Props: enable

Props: enable

Enables or disables the scrollbar for the associated axis.

Props: height

Props: thickness

Specifies the thickness of the scrollbar track. For horizontal scrollbars this represents height; for vertical scrollbars, this represents width.

Props: scrollbarRadius

Props: thumbRadius

Defines the corner radius of the scrollbar thumb.

Props: scrollbarColor

Props: thumbColor

Specifies the fill color of the scrollbar thumb.

Props: position

Props: position

Specifies the position of the scrollbar relative to the axis.

Available options:

• Top - Places the scrollbar at the top (for horizontal scrollbars).
• Bottom - Places the scrollbar at the bottom (for horizontal scrollbars).
• Left - Places the scrollbar on the left (for vertical scrollbars).
• Right - Places the scrollbar on the right (for vertical scrollbars).
• PlaceNextToAxisLine - Places the scrollbar next to the axis line.

API: labelSettings={} (on <SeriesDirective>)

API: <ChartSeriesLabel /> (within <ChartSeries>)

Configures options for displaying series names as inline labels in the chart. In EJ2 React, labels are configured inline via labelSettings object. In Pure React, they use a dedicated <ChartSeriesLabel /> component nested within <ChartSeries />.

Props: visible

Props: visible

Enables or disables the rendering of series names as inline labels.

API: paretoOptions={} (on <SeriesDirective>)

API: <ChartParetoOptions /> (within <ChartSeries>)

Moves Pareto-specific configuration from an inline paretoOptions object on the series to a dedicated <ChartParetoOptions /> component nested inside <ChartSeries />. This improves organization and allows nested child components (for example <ChartMarker />) for finer control.

Props: marker

Props: moved to child <ChartMarker /> inside <ChartParetoOptions />

Marker settings were moved from an inline marker object to a child <ChartMarker /> component nested within <ChartParetoOptions /> for clearer composition and extended marker customization.

API: primaryXAxis.multiLevelLabels (on <ChartComponent>)

API: <ChartMultiLevelLabels /> + <ChartMultiLevelLabel /> (within <ChartPrimaryXAxis>)

Moves multi-level axis label configuration from an inline multiLevelLabels array on the axis to dedicated <ChartMultiLevelLabels /> and <ChartMultiLevelLabel /> components nested within <ChartPrimaryXAxis />. This enables clearer composition and per-level customization.

Props: categories

Props: categories

Configures multi-level categories for multi-level labels. Each category defines a range within the axis with a start, end, and text value.

Props: alignment

Props: alignment

Defines the position of the multi-level labels. Available options: Left, Center, Right. Defaults to Center.

Props: overflow

Props: overflow

Defines the text overflow behavior for multi-level labels. Options: Trim, Wrap, None. Defaults to Wrap.

API: <SeriesDirective type='Polar' drawType='StackingColumn' /> (on series)

API: <ChartSeries type='PolarStackingColumn' /> (single type prop)

Polar/Radar draw types in EJ2 (separate type + drawType) are consolidated into a single type prop in Pure React using combined values (for example PolarStackingColumn, RadarLine, PolarScatter, etc.).

Props: drawType

Props: type (mapping)

Maps EJ2 drawType values to Pure React type enum variants. Common mappings include:

• StackingColumn → PolarStackingColumn / RadarStackingColumn
• Column → PolarColumn / RadarColumn
• Line → PolarLine / RadarLine
• Area → PolarArea / RadarArea
• Scatter → PolarScatter / RadarScatter

Event: axisLabelClick

Event: onAxisLabelClick

Event: chartMouseClick

Event: onClick

Event: legendClick

Event: onLegendClick

Event: chartMouseLeave

Event: onMouseLeave

Event: chartMouseMove

Event: onMouseMove

Event: pointClick

Event: onPointClick

Event: resized

Event: onResize

Event: zoomComplete

Event: onZoomEnd

Event: onZooming

Event: onZoomStart

Prop: enable

Component: <ChartCrosshair />
Prop: enable

Enables or disables the crosshair line. When set to true, the crosshair line is visible.

Prop: color, width, dashArray

Prop: lineStyle

Specifies the visual style of the crosshair line. You can customize the line's color, width, and dash pattern using the dashArray property.

Prop: crosshairTooltip

Component: <ChartCrosshairTooltip />

When set to true, a tooltip will be displayed at the axis intersection point when the crosshair is active.

Prop: content

Prop: content

Content of the annotation. Accepts HTML string, plain text, or DOM element ID.

Prop: coordinateUnits

Prop: coordinateUnit

Defines whether position values are axis-based ('Point') or pixel-based ('Pixel').

Prop: horizontalAlignment

Prop: hAlign

Horizontal alignment relative to the X-position. Available options: Right aligns the annotation to the right of its anchor or target, Center centers the annotation horizontally on its anchor or target, and Left aligns the annotation to the left of its anchor or target.

Prop: verticalAlignment

Prop: vAlign

Vertical alignment relative to the Y-position. Available options: Top aligns the annotation above its anchor or target, Center vertically centers the annotation on its anchor or target, and Bottom aligns the annotation below its anchor or target.

Prop: visible

Prop: visible

If set to true, the error bar for the data will be rendered.

Prop: errorBarColorMapping

Prop: errorBarColorField

Defines the color for the error bar, which is mapped to the data source mapping name.

Prop: crossesAt

Prop: crossAt.value

Defines the value at which the axis line intersects with another axis. This can be a numeric value, date, or category name, depending on the axis type.

Prop: crossesInAxis

Prop: crossAt.axis

Specifies the name of the target axis that the current axis line should intersect.

Prop: placeNextToAxisLine

Prop: crossAt.allowOverlap

Indicates whether the axis line is allowed to overlap axis elements such as labels and titles. When set to true, the axis line may cross over these elements.

Prop: selectionMode

Prop: mode

Specifies how data points or series can be selected or highlighted. Available options: 'None' disables selection, 'Series' selects the entire series, 'Point' selects individual data points, 'Cluster' selects a group of related data points.

Prop: allowMultiSelection

Prop: allowMultiSelection

Enables selection of multiple data points, series, or clusters. Note that the selectionMode must be set to 'Point', 'Series', or 'Cluster' for multi-selection to be enabled.

Prop: selectedDataIndexes

Prop: selectedDataIndexes

Defines the indexes of points to be selected when the chart is initially rendered. Note that selectionMode or highlightMode must be set to 'Point', 'Series', or 'Cluster' for this feature to work.

Prop: selectionPattern

Prop: pattern

Specifies the visual pattern applied to selected data points or series.

Prop: highlightMode

Prop: mode

Specifies how data points or series can be highlighted. Available options: 'None' disables highlighting, 'Series' highlights the entire series, 'Point' highlights individual data points, 'Cluster' highlights a group of related data points.

Prop: highlightColor

Prop: fill

Specifies the color used to highlight a data point when hovered.

Prop: highlightPattern

Prop: pattern

Defines the visual pattern applied to highlighted data points or series.