I am working on a donut chart in Highcharts where I am displaying some data. The thing is that when the donut chart is displayed there is a little bit of overlap between the types of data. If you would like to see the chart in jsfiddle, here is the html for it
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
and the js code
Highcharts.chart('container', {
chart: {
type: 'pie',
margin: [0, 0, 0, 0]
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
pie: {
startAngle: 90,
innerSize: '99%',
borderWidth: 16,
slicedOffset: 40,
borderColor: undefined,
dataLabels: {
enabled: false
},
states: {
hover: {
brightness: 1,
halo: {
size: 0
}
}
}
}
},
series: [{
data: [29.9, 71.5,50]
}]
});
If you hoover over one of the series in the donut chart, the line reaches into the other one. My question is that is there an option so the lines won't overlap each other, so the end is not rounded but have sharp edges that do not overlap? Thank you for any help.
There are two approaches.
visibility as false and set the series.ignroeHiddenPoint as false - https://jsfiddle.net/BlackLabel/h2m0e35a/ - here you will need to implement some logic to calculate the amount and the values of those dummy points.Eventually I managed to figure it out. All I had to do is to set the borderWidth to 0 and change the innerSize e.g 80% (this one depends on how wide you want the donut to be).