Donut
var options = {
chart: {
type: 'donut',
width: 380
},
colors: ['#1b55e2', '#009688', '#e7515a', '#e2a03f'],
dataLabels: {
enabled: false
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '14px',
markers: {
width: 10,
height: 10,
},
itemMargin: {
horizontal: 0,
vertical: 8
}
},
plotOptions: {
pie: {
donut: {
size: '65%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '15px',
fontFamily: 'Nunito, sans-serif',
color: undefined,
offsetY: -10
},
value: {
show: true,
fontSize: '26px',
fontFamily: 'Nunito, sans-serif',
color: '20',
offsetY: 16,
formatter: function (val) {
if(parseInt(val) >= 1000000){
return (val / 1000000).toLocaleString('en') + 'M';
} else if (parseInt(val) >= 1000) {
return (val / 1000).toLocaleString('en') + 'K';
} else {
return val.toLocaleString('en');
}
}
},
total: {
show: true,
showAlways: true,
label: gettext('Total'),
color: '#888ea8',
formatter: function (w) {
var val = w.globals.seriesTotals.reduce( function(a, b) {
return a + b
}, 0);
if(parseInt(val) >= 1000000){
return (val / 1000000).toLocaleString('en') + 'M';
} else if (parseInt(val) >= 1000) {
return (val / 1000).toLocaleString('en') + 'K';
} else {
return val.toLocaleString('en');
}
}
}
}
}
}
},
stroke: {
show: true,
width: 25,
},
series: sales_list,
labels: headers,
responsive: [{
breakpoint: 1439,
options: {
chart: {
width: '250px',
height: '390px'
},
legend: {
position: 'bottom'
},
plotOptions: {
pie: {
donut: {
size: '65%',
}
}
}
},
}]
};