Donut chart highcharts
by ismusidhu
HTML
<script src="https://code.highcharts.com/5.0.10/highcharts.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
Highcharts.chart('container', {
chart: {
type: 'pie',
},
title: {
text: 'sfs ',
verticalAlign: 'middle',
floating: true
},
yAxis: {
title: {
text: 'aaaa'
}
},
plotOptions: {
pie: {
colors: [
'red',
'green',
],
//y:1,
shadow: false,
//center: ['50%', '50%'],
borderWidth: 0,
showInLegend: false,
size: '100%',
innerSize: '60%',
data: [
['allo', 10],
['asdad', 90],
]
}
},
tooltip: {
valueSuffix: '%',
formatter: function() {
if (this.percentage != 0) return `<span style="color:${this.point.color}">\u25CF</span> ${this.point.name} - ${this.point.percentage}%`;
}
},
series: [{
type: 'pie',
name: 'Browser share',
dataLabels: {
connectorColor: 'grey',
color: 'black',
//y:-10,
softConnector: true,
connectorWidth: 1,
verticalAlign: 'top',
distance: 100,
formatter: function() {
if (this.percentage != 0) return `${this.point.name} - ${this.point.percentage}%`;
}
}
}],
credits: false
});