DonutPremium
Donut charts are circular charts which represent a variation of the Pie charts and are capable of displaying multiple nested series.
You can utilize the blank center of a Donut chart to show additional information within it.
Start Free Trial
Basic Usage
The following example demonstrates the Donut chart in action.
Displaying Multiple Series
The Donut chart renders multiple series in the form of concentric rings. This behavior is different from the behavior of the Pie chart, which supports only one series.
The following example demonstrates how to render multiple data series as concentric rings in a Donut chart.
Customizing the Appearance
You can customize the visual appearance of the Donut chart through several properties that control the chart's structure and styling:
holeSize—Specifies the diameter of the center hole in pixels. Larger values create a thinner ring.startAngle—Determines the starting angle in degrees for the first segment.padding—Sets the spacing around the chart in pixels.border—Configures the border appearance for the Donut series with color, opacity, and width properties.colorField—Specifies the data field that provides a color for each category.opacity—Controls the transparency of the segments.overlay—Specifies the appearance effect for the series. UseroundedBevelorsharpBevelfor a beveled effect, ornonefor a flat appearance.
The following example demonstrates the Donut appearance settings in one chart:
Displaying Information in the Center
To display content in the center of the Donut chart, either:
Using the Center Template
The center template is an HTML overlay that is positioned over the center of the Donut chart. To implement the content use the donutCenterRender render prop of the Chart component.
While documents which are exported through the HTML Drawing API display the content of the center template, vector graphics and exported files do not render it.
The following example demonstrates how to use the donutCenterRender prop to display a dynamic HTML overlay in the center of the Donut chart.
Using Drawing Visuals
Similar to the other Chart types, you can overlay the Donut series with custom drawing elements. The approach of using drawing visuals is more flexible than using the donut center template and also has the advantage that the overlay is part of the chart drawing surface. As a result, all exported files render the content of the donut center as an integral element of the component.