AmCharts - Slice labels outside of chart div - amcharts

Question

When I create a funnel chart with a lot of data, the labels are going outside of the chart div, like this
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/

Answer 1

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>