Small values pie chart
by Amit Sant
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
var data = [{
name: 'One',
y: 5,
color: 'red'
}, {
name: 'Two',
y: 5,
color: 'blue'
}, {
name: 'Three',
y: 30,
color: 'purple'
}, {
name: 'Four',
y: 20,
color: 'green'
}, {
name: 'Five',
y: 30,
color: 'black'
}, {
name: 'Six',
y: 2,
color: 'grey'
}, {
name: 'Seven',
y: 1,
color: 'pink'
}];
var start = -90;
var series = [];
for (var i = 0; i < data.length; i++) {
var end = start + 360 * data[i].y / 93;
series.push({
name:"Count",
type: 'pie',
size: 200,
dataLabels: {
enabled: true,
distance: data[i].y < 5? 30:-30,
formatter: function() {
return Math.round(this.y/93*100) + ' %' + ' ('+Math.round(this.y)+')';
}
},
startAngle: start,
endAngle: end,
data: [data[i]]
});
start = end;
};
console.log(series);
$('#container').highcharts({
plotOptions:{
pie: {
showInLegend: true
}
},
series: series
});
});