Pie Chart Component

The React Pie Chart component is used to visualize data as slices of a circle, where each slice represents a proportion of the whole dataset. It supports interactive features such as tooltips, legends, data labels, and animations, making it ideal for displaying percentage or categorical data.

Usage

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

import { PieChart, PieChartLegend, PieChartTitle,,PieChartTooltip, PieChartSeriesCollection, PieChartSeries } from '@syncfusion/react-charts';

<PieChart>
  <PieChartSeriesCollection>
      <PieChartSeries  xField={'x'} yField='y' dataSource={data}></PieChartSeries>
  </PieChartSeriesCollection>
  <PieChartTitle title='Pie Chart'></PieChartTitle>
  <PieChartTooltip enable={true}></PieChartTooltip>
  <PieChartLegend visible={true}></PieChartLegend>
</PieChart>

import { PieChart, PieChartLegend, PieChartTitle,,PieChartTooltip, PieChartSeriesCollection, PieChartSeries } from '@syncfusion/react-charts';

<PieChart>
  <PieChartSeriesCollection>
      <PieChartSeries  xField={'x'} yField='y' dataSource={data}></PieChartSeries>
  </PieChartSeriesCollection>
  <PieChartTitle title='Pie Chart'></PieChartTitle>
  <PieChartTooltip enable={true}></PieChartTooltip>
  <PieChartLegend visible={true}></PieChartLegend>
</PieChart>

Demos

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

Props

The following table outlines the props for the Pie Chart component:

Name	Type	Default	Description
accessibility	PieChartAccessibilityProps	{ ariaLabel: null, focusable: true, role: null, tabIndex: 0 }	Provides accessibility options for the pie chart container element.
background	string	transparent	Sets the background color of the chart. Accepts valid CSS color strings such as hex or rgba values.
backgroundImage	string	''	Sets a background image for the chart. Accepts a string value representing a URL or image path.
border	PieChartBorderProps	{ color: '', width: 1, dashArray: '' }	Customizes the chart border using `color`, `width`, and `dashArray` properties.
center	PieChartCenterProps	{ x: '50%', y: '50%' }	Specifies the center position of the pie chart using `x` and `y` coordinates.
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 pie chart element.
margin	PieChartMarginProps	{ left: 10, right: 10, top: 10, bottom: 10 }	Defines the margins around the chart, including left, right, top, and bottom. These margins create space between the chart's outer edge and its container.
pointRender	(event: PieChartPointRenderProps) => string	null	Optional function that allows customization of each point in the series.
smartLabels	boolean	true	When set to true, labels for the points will be placed smartly to avoid overlapping.
theme	Theme	Material	Visual theme applied to the pie chart. Available options: `Material`: Applies the Material light theme. `MaterialDark`: Applies the Material dark theme.
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 Pie Chart component:

Name	Type	Description
onClick	(event: PieChartMouseEvent) => void	Triggered when the chart is clicked. Provides information about the mouse event, including the target element and pointer coordinates.
onLegendClick	(event: PieLegendClickEvent) => void	Triggered after a legend item is clicked. Provides details about the clicked legend item, including its associated series and data points
onMouseEnter	(event: PieChartMouseEvent) => void	Optional function to customize the point of the series.
onMouseLeave	(event: PieChartMouseEvent) => 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	(event: PieChartMouseEvent) => 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	(event: PiePointClickEvent) => 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	(event: PieResizeEvent) => void	Triggered after the chart is resized. Provides details about the chart's size before and after the resize.