Overview
The React pie chart is a circular chart divided into slices, used to compare the proportional values of different categories in a dataset to the whole.
Pie legend
Legends display information about each data point, helping you understand its contribution to the total. You can collapse or hide a data point by clicking its legend item.
Custom radius
Adjust the radius of the pie chart to modify its appearance and functionality.
Start and end angles
Customize the start and end angles of the chart to create a semi-pie or achieve the desired visual orientation.
Data labels
Data labels offer contextual information for each data point and can be rotated to a specified angle for better readability.
Smart labels
This feature arranges data labels smartly to avoid overlapping when the data point values fall in close range.
Grouped points
Group data points in a pie chart based on specific conditions. The group of slices can be expanded into individual points by clicking on it.
Drilldown operation
Drilldown allows you to focus on detailed data within a chart by navigating deeper into specific points or categories.
Different radii
Customize the radius of an individual slice using built-in APIs.
Pie center
Move the React pie chart’s center relative to the plot area. Labels may jump around when there are many slices in the plot area, so the center can be set in a more spacious area.
Center label
Place a label at the center of the pie chart. When you hover over a slice, the relevant data is dynamically displayed in the center for quick insights.
Customization
Customize the look and feel of the pie using built-in APIs to match your design and data presentation needs.
React pie chart code example
Get started with the React pie chart using a few lines of TSX code, as shown below. You can also explore this React pie chart example to learn how to render and customize the chart in a React application.
import { PieChart, PieChartSeriesCollection, PieChartSeries } from '@syncfusion/react-charts';
export default function App() {
const data = [
{ x: 'United States', y: 45 },
{ x: 'Australia', y: 53 },
{ x: 'China', y: 56 },
{ x: 'India', y: 61 },
{ x: 'Japan', y: 40 },
{ x: 'United Kingdom', y: 20 }
];
return (
<PieChart>
<PieChartSeriesCollection>
<PieChartSeries dataSource={data} xField="x" yField="y" />
</PieChartSeriesCollection>
</PieChart>
)
}Learning resources
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
