Example of Donut With Gradient in ASP.NET MVC Chart Control
This ASP.NET MVC donut chart example shows the share of e-commerce orders by country in 2025 using a donut chart with radial gradient fills. Each slice is annotated with data labels showing the country name and its exact percentage, while the legend on the right provides a quick reference for all countries and their respective values.
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, use the pointRender event. Through this
event, you can customize the color of each point in the donut chart using the radialGradient property,
which applies a circular gradient from the center outward with multiple color stops to create smooth color transitions across each slice.
Tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point on touch-enabled devices.
More information about the donut series can be found in this documentation sectionopens in a new tab.