Donut with radial gradient
Normally, Pie Chart supports radial gradients only. This demo shows a clever trick with events that modify linear gradient rotation, enabling use of this type of fill on slices.
Open in:New tab
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.PieChart);
// Add datachart.data = [ { country: "Lithuania", litres: 501.9 }, { country: "Czech Republic", litres: 301.9 }, { country: "Ireland", litres: 201.1 }, { country: "Germany", litres: 165.8 }, { country: "Australia", litres: 139.9 }, { country: "Austria", litres: 128.3 }, { country: "UK", litres: 99 }, { country: "Belgium", litres: 60 }, { country: "The Netherlands", litres: 50 }];
// Add and configure Seriesvar pieSeries = chart.series.push(new am4charts.PieSeries());pieSeries.dataFields.value = "litres";pieSeries.dataFields.category = "country";pieSeries.innerRadius = am4core.percent(50);pieSeries.ticks.template.disabled = true;pieSeries.labels.template.disabled = true;
var rgm = new am4core.LinearGradientModifier();rgm.brightnesses.push(0, -0.4);pieSeries.slices.template.fillModifier = rgm;
var rgm2 = new am4core.LinearGradientModifier();rgm2.brightnesses.push(0, -0.4);
pieSeries.slices.template.strokeModifier = rgm2;pieSeries.slices.template.strokeOpacity = 1;pieSeries.slices.template.strokeWidth = 1;
chart.legend = new am4charts.Legend();chart.legend.position = "right";
pieSeries.slices.template.events.on("validated", function (event) { var gradient = event.target.fillModifier.gradient; gradient.rotation = event.target.middleAngle + 90;
var gradient2 = event.target.strokeModifier.gradient; gradient2.rotation = event.target.middleAngle + 90;});<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 500px;}donut-with-radial-gradient