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: 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: placement 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. Available options: • Near - Aligns items to the left. • Center - Centers the items. • Far - 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: 'Ellipsis' } }}

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. • Ellipsis: Trims the overflowed text and adds ellipsis. • 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.

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.