Search code examples
amcharts

Legends cut off

Some part of legend is missing. How it possible to show full. Some time my label is long. I searched a lot but I am not found any thing

enter image description here

var chart = am4core.create("product_sale_chart", am4charts.PieChart);

// Add data
chart.data = [{
    "product": "Brufen 200 mg",
    "size": "94000"
}, {
    "product": "Panadol Ford-20-Tablet-Pack",
    "size": "387000"
}, {
    "product": "Betnovit",
    "size": "4340"
}]

chart.innerRadius = 100;
var label = chart.seriesContainer.createChild(am4core.Label);
label.text = "2019";
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fontSize = 50;
label.labelRadius = -500;
//label.paddingLeft = '50px !important';


var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "size";
pieSeries.dataFields.category = "product";
Solution

  • This is because the labels are stretching outside the bounds of the chart. If this is Amcharts v3 you can reduce the labelRadius to bring them closer to the center.

    EDIT

    Now that I see your code it's clear you're using Amcharts v4, so instead of labelRadius you need to use the following:

    pieSeries.labels.template.radius = am4core.percent(-40);

    Here's a working pen

    More on labels