Overview
The React doughnut chart is similar to a pie chart but with a hollow center. It is used to compare the contribution of each data point to the overall total in a visually appealing way.
Custom inner radius
You can customize the inner radius of the doughnut chart to achieve the desired visual style. Setting the inner radius to 0 converts the doughnut chart into a pie chart. Both the outer radius and inner radius can be adjusted.
Doughnut legend
Legends display information about each data point, helping you understand its contribution to the total. You can also collapse or hide a data point by clicking its legend item.
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 doughnut chart based on specific conditions. The group slice 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.
Doughnut with different radii
Customize the radius of individual slices using built-in APIs.
Doughnut center
Adjust the position of the donut’s center relative to the plot area to achieve the desired layout and visual balance.
Center label
Place a label at the center of the doughnut 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 doughnut using built-in APIs to match your design.
React doughnut chart code example
Quickly get started with the React doughnut chart using a few lines of TSX code, as shown below. You can also explore this React doughnut 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' }
];
return (
<PieChart>
<PieChartSeriesCollection>
<PieChartSeries dataSource={data} xField="x" yField="y" innerRadius="65%" />
</PieChartSeriesCollection>
</PieChart>
)
}Learning resources
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
