Labels are cropped in drill-down pie chart (amCharts)

1
votes

We have implemented pie chart using amCharts. But when drill down occurs, the pulled slices label are cropped. How can we fix this issue?

chart = AmCharts.makeChart( "chart_1", {
  "type": "pie",
  "autoMargins": false,
  "marginRight": 10,
  "marginBottom": 10,
  "dataProvider": generateChartData(),
  "titleField": "SubTypeName",
  "valueField": "Weight",
  "outlineColor": "#FFFFFF",
  "colorField": "Color",
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "pulledField": "pulled",
  "addClassNames": true,

  "labelRadius": 3,
  "radius": "40%",
  "innerRadius": "30%",

  "angle": 25,
  "depth3D": 13,

  "legend": {
    "autoMargins": false,
    "marginTop": 10,
    "marginBottom": 10,
  }

} );

enter image description here

2
amcharts
Can you post the code to your chart? – martynasma
Please note, I have removed a trailing comma in your code. Trailing commas while OK in modern browsers would result in JS error in older IEs. – martynasma

2 Answers

3
votes

There are a few things you can do work around this issue. You can apply one or combination of the below:

1) Lower radius property. This will leave more room for slice labels when pulled out. Or remove this parameter altogether. The chart will then auto-calculate the pie radius so that labels are always visible even if pulled out.

2) Set pullOutRadius to some lower percent value than default 20%. This will make slices pull out less.

3) Limit width of the labels by setting maxLabelWidth (default 200 pixels). This will make the labels break into multiple lines, effectively reducing it's width and chance being cut off.

2
votes

Follow this AmCharts Tutorial "Fitting pie charts into small containers"

  1. Make the chart container bigger.
  2. Wrap it around some other div to confine the chart to the same space.

#

#chartwrapper{
 position: relative;
 width: 200px;
 height: 200px;
}
#chartdiv  {
  position: absolute;
  top: -30px;
  left: -30px;
  width : 260px;
  height : 260px;
}

Pie containers