React Donut Chart

A donut (doughnut) chart is a variation of a pie chart with a central hole, ideal for showing category-wise contribution to a total while providing space for center content such as totals, titles, or KPIs.

Overview

A donut chart is created by setting the innerRadius on the PieChartSeries, which carves out a circular hole at the center of the pie. Increasing the innerRadius value makes the inner hole larger, giving the chart its donut appearance while preserving the outer shape for comparing proportions. Bind category and value fields with xField and yField, and enhance the visualization using legends, tooltips, explode behavior, and data labels.

Donut with Various Radius

A donut chart can use variable radii to emphasize categories visually. Each slice’s outer radius is determined by a data field, making larger slices represent more significant values and smaller slices represent less important ones. Use radius mapping to render slices with different radii by binding a numeric field from your data to the radius property of each slice. This allows you to highlight priority or engagement levels effectively.

Semi Donut

A semi- donut chart displays half of a pie, making it ideal for compact, dashboard-friendly layouts. This format is useful when you want to save space while still showing category contributions. To create a semi-pie, use the startAngle and endAngle properties in the PieChartSeries component to limit the sweep (e.g., 270° to 90°).

Center Labels

To use the PieChartCenterLabel component inside the PieChartSeries to render text in the donut’s center. You can fully style it via label (fontSize, fontWeight, color). For dynamic feedback on hover, set hoverTextFormat which specifies the format of the center label text when hovering over a slice’s segment.

Rounded Corners

Rounded corner radius softens slice edges by rounding the outer corners, giving the donut a smoother, more polished look. This can be achieved by setting the borderRadius property in PieChartSeries. It improves aesthetics and readability, especially in dense charts, by subtly separating adjacent slices.

Live Update

The chart animates through a time-series of frames by updating the PieChartSeries dataSource on an interval. A frameIndex state advances with setInterval, data is memoized per frame, and animation props handle transitions; the center label is also updated from the current frame.