amcharts / amcharts4

The most advanced amCharts charting library for JavaScript and TypeScript apps.
https://www.amcharts.com/
1.16k stars 321 forks source link

Is there a way to center label in nested donut chart. #4285

Closed Swaraj55 closed 1 year ago

Swaraj55 commented 1 year ago

I share example code

`// Themes begin am4core.useTheme(am4themes_animated); // Themes end

// Create chart instance var chart = am4core.create("chartdiv", am4charts.PieChart);

// Let's cut a hole in our Pie chart the size of 40% the radius chart.innerRadius = am4core.percent(40);

// Add data chart.data = [{ "country": "Lithuania", "litres": 501.9, "bottles": 1500 }, { "country": "Czech Republic", "litres": 301.9, "bottles": 990 }, { "country": "Ireland", "litres": 201.1, "bottles": 785 }, { "country": "Germany", "litres": 165.8, "bottles": 255 }, { "country": "Australia", "litres": 139.9, "bottles": 452 }, { "country": "Austria", "litres": 128.3, "bottles": 332 }, { "country": "UK", "litres": 99, "bottles": 150 }, { "country": "Belgium", "litres": 60, "bottles": 178 }, { "country": "The Netherlands", "litres": 50, "bottles": 50 }];

// Add and configure Series var pieSeries = chart.series.push(new am4charts.PieSeries()); pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country"; pieSeries.slices.template.stroke = am4core.color("#fff"); pieSeries.slices.template.strokeWidth = 2; pieSeries.slices.template.strokeOpacity = 1;

// Disabling labels and ticks on inner circle pieSeries.labels.template.disabled = true; pieSeries.ticks.template.disabled = true;

// Disable sliding out of slices pieSeries.slices.template.states.getKey("hover").properties.shiftRadius = 0; pieSeries.slices.template.states.getKey("hover").properties.scale = 0.9;

// Add second series var pieSeries2 = chart.series.push(new am4charts.PieSeries()); pieSeries2.dataFields.value = "bottles"; pieSeries2.dataFields.category = "country"; pieSeries2.slices.template.stroke = am4core.color("#fff"); pieSeries2.slices.template.strokeWidth = 2; pieSeries2.slices.template.strokeOpacity = 1; pieSeries2.slices.template.states.getKey("hover").properties.shiftRadius = 0; pieSeries2.slices.template.states.getKey("hover").properties.scale = 1.1;`

what I want for the last series labels should display as usual but for the inner series label shows on the slices.

image

In the above pic don't care about last series but focus on inner series.

image

I want to apply on this for inner series label or percentage show that which label occupies how much area example 23% like that

xorspark commented 1 year ago

Please refer to this tutorial on how to place labels inside the slices: https://www.amcharts.com/docs/v4/tutorials/labels-inside-pie-chart-slices/

You need to apply this to the first (inner) series and adjust the radius settings as needed.

Swaraj55 commented 1 year ago

Thanks