Chart Component

The React Chart component enables developers to visualize data through a wide range of interactive and customizable chart types. It supports real-time updates, responsive layouts, and efficient rendering of large datasets for modern web applications.

Usage

To import and use the Chart component in your application, use the following code snippet:

import { Chart, ChartPrimaryXAxis, ChartSeries, ChartSeriesCollection } from '@syncfusion/react-charts';

<Chart >
<ChartPrimaryXAxis valueType='Category' />
<ChartSeriesCollection>
  <ChartSeries dataSource={categoryData} xField="x" yField="y" type="Line" />
</ChartSeriesCollection>
</Chart>

import { Chart, ChartPrimaryXAxis, ChartSeries, ChartSeriesCollection } from '@syncfusion/react-charts';

<Chart >
<ChartPrimaryXAxis valueType='Category' />
<ChartSeriesCollection>
  <ChartSeries dataSource={categoryData} xField="x" yField="y" type="Line" />
</ChartSeriesCollection>
</Chart>

Demos

Explore the demos of the React Chart component. Refer to this page.

Props

The following table outlines the props for the Chart component:

Name	Type	Default	Description
accessibility	ChartAccessibilityProps	{ ariaLabel: null, focusable: true, role: null, tabIndex: 0 }	Provides accessibility options for chart container element.
background	string	null	Sets the background color of the chart. Accepts valid CSS color strings in hex or RGBA formats.
backgroundImage	string	null	Sets the background image of the chart. Accepts a URL or local image path.
border	ChartBorderProps	{ color: '', width: 1, dashArray: '' }	Customizes the chart border using `color`, `width`, and `dashArray` properties.
enableAnimation	boolean	true	Enables animation effects for chart elements such as axis labels, gridlines, series, markers, and data labels. When set to `true`, animations are triggered during interactions like legend item clicks or when the data source is updated.
enableSideBySidePlacement	boolean	true	Controls whether columns for different series appear side by side in a column chart.
focusOutline	FocusOutlineProps	{ width: 1.5, color: null, offset: 0 }	Specifies the visual outline style applied when the chart container receives focus.
height	string	null	Sets the height of the chart. Accepts values in pixels (e.g., `'100px'`) or percentages (e.g., `'100%'`). If set to `'100%'`, the chart occupies the full height of its parent container.
id	string	''	Unique identifier for the chart element.
margin	ChartMarginProps	{ top: 10, right: 10, bottom: 10, left: 10 }	Customizes the margins around the chart. Defines the space between the chart's outer edge and its chart area.
palettes	string[]	[ ]	Defines a set of colors used for rendering chart series. Each color in the array is applied sequentially to the series.
pointRender	(args: PointRenderProps) => string	null	Specifies a callback function to customize the color of individual points in the series.
theme	Theme	'Material'	Applies a visual theme to the chart. Available options: `Material`: Applies the Material light theme. `MaterialDark`: Applies the Material dark theme.
transposed	boolean	false	If set to `true`, the chart is rendered in a transposed layout, swapping the X and Y axes.
width	string	null	Sets the width of the chart. Accepts values in pixels (e.g., `'100px'`) or percentages (e.g., `'100%'`). If set to `'100%'`, the chart occupies the full width of its parent container.

Events

The following table outlines the events for the Chart component:

Name	Type	Description
onAxisLabelClick	(args: AxisLabelClickEvent) => void	Triggered after an axis label is clicked. Provides details about the clicked label including its position, value, and associated axis.
onClick	(args: ChartMouseEvent) => void	Triggered when the chart is clicked. Provides information about the mouse event, including the target element and pointer coordinates.
onLegendClick	(args: LegendClickEvent) => void	Triggered after a legend item is clicked. Provides details about the clicked legend item including associated series and data points.
onMouseEnter	(args: ChartMouseEvent) => void	Triggered when the mouse enters a chart element. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.
onMouseLeave	(args: ChartMouseEvent) => void	Triggered when the mouse leaves the chart. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.
onMouseMove	(args: ChartMouseEvent) => void	Triggered when the mouse moves over the chart. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.
onPointClick	(args: PointClickEvent) => void	Triggered when a data point in the chart is clicked. Provides details about the clicked point, including its position, series index, and mouse coordinates.
onResize	(args: ResizeEvent) => void	Triggered after the chart is resized. Provides details about the chart's size before and after the resize.
onZoomEnd	(args: ZoomEndEvent) => void	Triggered continuously while a zooming operation is in progress. Fires when the user finishes a zoom action, such as releasing the mouse or completing a pinch gesture. Provides details about the zoomed axis, including its name, zoom factor, zoom position, and visible range before and after the operation.
onZoomStart	(args: ZoomStartEvent) => void	Triggered after a zoom selection operation is completed. Fires during user interactions such as dragging, pinching, or mouse wheel zooming. Provides access to the axis data involved in the zoom operation.