Separation of combined negative labels & values in amPieChart - pie-chart

Question

Does anyone know if there's a way to split, the auto combined negative labels in amPieChart for amCharts v3. It seems like it's automatically adding all negative values into one, named "Other". If there's just one value, then it dispalys it and it's value, but if there are more, then it adds them together and replaces the label with "Other"
I went through the amPieChart v3 documentation, but couldn't find anything that does this:
Example
{
"country": "Belgium",
"litres": -60
}, {
"country": "The Netherlands",
"litres": -50
}

Answer 1

Negative values in a pie chart doesn't make a lot of sense and AmCharts' pie charts do not play well with them. Think about it - how would you realistically display a negative slice?
The chart groups values that are below the groupPercent threshold, which is zero by default. If you only want to remove the grouping into the Other category, set this value to a small enough negative number to encompass it.
AmCharts.makeChart("...", {
// ...
"groupPercent": -100, //sample value
});
If you need to display those values as slices, then you have to provide absolute values as your valueFields and reference the real number as a separate property in your display fields such as balloonText and the legend's valueText, i.e.
var chartData = [
// ...
{
"country": "Belgium",
"absValue": 60,
"litres": -60
},
// ...
];
AmCharts.makeChart("...", {
// ...
"valueField": "absValue",
"balloonText": "[[title]]: [[litres]]",
//...
"legend": {
"valueText": "[[litres]]",
// ...
}
});
Demo using absolute values below:
var chartData = [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": -60
}, {
"country": "The Netherlands",
"litres": -50
}];
chartData.forEach(function(dataItem) {
dataItem.absValue = Math.abs(dataItem.litres);
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"startDuration": 0,
"theme": "none",
"addClassNames": true,
"legend": {
"valueText": "[[litres]]",
"position": "right",
"marginRight": 100,
"autoMargins": false
},
"innerRadius": "30%",
"defs": {
"filter": [{
"id": "shadow",
"width": "200%",
"height": "200%",
"feOffset": {
"result": "offOut",
"in": "SourceAlpha",
"dx": 0,
"dy": 0
},
"feGaussianBlur": {
"result": "blurOut",
"in": "offOut",
"stdDeviation": 5
},
"feBlend": {
"in": "SourceGraphic",
"in2": "blurOut",
"mode": "normal"
}
}]
},
"dataProvider": chartData,
"valueField": "absValue",
"balloonText": "[[title]]: [[litres]]",
"titleField": "country",
"export": {
"enabled": true
}
});
chart.addListener("init", handleInit);
chart.addListener("rollOverSlice", function(e) {
handleRollOver(e);
});
function handleInit() {
chart.legend.addListener("rollOverItem", handleRollOver);
}
function handleRollOver(e) {
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}
.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.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" />
<div id="chartdiv"></div>