AmCharts - Slice labels outside of chart div

Question

When I create a funnel chart with a lot of data, the labels are going outside of the chart div, like this

Chart image

Is it possible to fix this or do I need to create another div with legends only ?

        var userInfo = JSON.parse('@Html.Raw(DataJson)');
        var chart = AmCharts.makeChart("chartdiv", {
            "type": "funnel",
            "theme": "light",
            "dataProvider": userInfo,
            "balloon": {
                "fixedPosition": false
            },
            "valueField": "Quantidade",
            "titleField": "Variac",
            "marginRight": 250,
            "marginLeft": 30,
            "startX": 0,
            "depth3D": 50,
            "angle": 25,
            "outlineAlpha": 1,
            "outlineColor": "#FFFFFF",
            "outlineThickness": 0.5,
            "labelPosition": "right",
            "balloonText": "[[Variac]]: [[Quantidade]]",
        });

Here is a demo that illustrates the problem.

http://jsfiddle.net/abngzewr/3/

xorspark xorspark · Accepted Answer · 2018-09-17T17:05:53

There isn't a way to prevent labels from leaving the chart div, but you can work around this by setting a hideLabelsPercent value that hides the smaller slices and then create a legend that lists all the slices.

AmCharts.makeChart("chartdiv", {
  // ...
  hideLabelsPercent: 2, //hide labels of slices that take up < 2% in size
  // ...
});

Since you have a lot of data, you can create a legend in an external div using divId so you have room for both the chart and legend separately.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "funnel",
  "theme": "light",
  "dataProvider": [{
      "title": "Website visits",
      "value": 200
    }, {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    }, {
      "title": "Purchased additional products",
      "value": 26
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    },
    {
      "title": "Downloads",
      "value": 123
    }, {
      "title": "Requested price list",
      "value": 98
    }, {
      "title": "Contaced for more info",
      "value": 72
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Contacted for support",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    }, {
      "title": "Purchased",
      "value": 35
    },

  ],
  "balloon": {
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "title",
  "marginRight": 250,
  "marginLeft": 30,
  "startX": 0,
  "depth3D": 50,
  "angle": 25,
  "outlineAlpha": 1,
  "outlineColor": "#FFFFFF",
  "hideLabelsPercent": 2,
  "outlineThickness": 2,
  "labelPosition": "right",
  "balloonText": "[[title]]: [[value]]n[[description]]",
  "export": {
    "enabled": true
  },
  "legend": {
    "divId": "legenddiv"
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}
#legenddiv {
  position: relative;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/funnel.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="legenddiv"></div>

AmCharts - Slice labels outside of chart div

1 Answers