React Highcharts v9.2 Solid Gauge Rounded Ends - reactjs

Question

I am working with solid gauge. We are upgrading from version 7.2.2 to the latest 9.2. We use to be able to pass in the y-axis plotbands a rounded: true which would round the tips of the bands. Since upgrading this no longer works. Instead the tips are squared off. I am looking for any assistance in how I might handle this.
Here is a fiddle of what it looks like squared off:
fiddle
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '110%',
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
valueSuffix: '%',
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}</span>',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: [
{
"startAngle": -140,
"endAngle": 140,
"background": {
"shape": "arc",
"borderWidth": 0,
"backgroundColor": "#FFF0"
}
}
],
yAxis: [
{
"gridLineWidth": 0,
"opposite": false,
"title": {
"text": "",
"useHTML": true
},
"labels": {
"useHTML": true,
"format": "{value}",
"enabled": false
},
"min": 0,
"max": 100,
"lineWidth": 0,
"tickWidth": 0,
"minorTickWidth": 0,
"plotBands": [
{
"thickness": "10%",
rounded: true,
"from": 0,
"to": 73,
"color": "#1792E555",
},
{
"thickness": "10%",
"from": 76,
"to": 88,
"color": "#FFE393"
},
{
"thickness": "10%",
"from": 91,
"to": 100,
"color": "#F9B890"
}
],
"plotLines": [],
"index": 0
}
],
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: [
{
"data": [
{
"y": 10,
"color": "#1792E5"
}
],
"radius": "100%",
"innerRadius": "90%",
linecap: 'rounded',
"rounded": true,
"useDial": false,
"type": "solidgauge",
"tooltip": {
"enabled": true,
"useHTML": true,
"borderRadius": 0,
"borderWidth": 0,
"shadow": false,
"valueDecimals": 2,
"style": {
"fontFamily": "inherit"
},
"padding": 6,
"shape": "square"
},
"dataLabels": {
"style": {
"textOutline": "none"
}
},
"events": {}
}
]
});

Answer 1

Unfortunately, it's not so easy to do. Since the plotBand is an SVG element you can try to edit its path and round the corners but it might be hard. You can check how the rounded path is created here: https://code.highcharts.com/modules/solid-gauge.src.js?_ga=2.104350400.154582566.1629699669-527407293.1629434064
And you can also check out this plugin: https://github.com/highcharts/rounded-corners
But the easiest solution would be to use another solidGauge series instead of plotBand. Something like that: https://jsfiddle.net/BlackLabel/k35vcsnx/
series[{...}, {
type: "solidgauge",
rounded: true,
data: [{
color: "#1792E555",
radius: '100%%',
innerRadius: '90%',
y: 73
}]
}