Implementing the stroke-linecap
solution appears to resolve the issue effectively. Feel free to test it with the example below:
Sample configuration:
Highcharts.chart("container", {
chart: {
type: 'solidgauge',
events: {
load() {
this.pane[0].group.element.getElementsByTagName('path')[0].setAttributeNS(null, 'stroke-linejoin', 'round');
}
}
},
pane: {
size: '100%',
startAngle: 0,
endAngle: 300,
background: {
borderWidth: 30,
shape: 'arc',
outerRadius: '90%',
innerRadius: '90%'
}
},
plotOptions: {
solidgauge: {
innerRadius: '80%',
radius: '100%',
linecap: "round",
rounded: true
}
},
yAxis: {
lineWidth: 0,
tickPositions: []
},
series: [{
data: [70],
dataLabels: {
enabled: false
}
}]
});
Demonstration:
https://jsfiddle.net/BlackLabel/usbha9c1/