This donut chart example shows the latest percentage share of e-commerce orders by country using a donut series with radial gradient fills. Data labels annotate each slice, and the legend on the right lists the exact percentages.
In this example, you can see how to render and configure a donut chart with a gradient. To apply a gradient to each point in the pie series, we use the pointRender event. Through this event, you can customize the color of each point in the donut chart.
Tooltips are enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
Injecting Module
The Charts component's features are segregated into individual feature modules. To use pie chart, we need to inject PieSeries module into services.
More information about the donut series can be found in this documentation section.