Simple gauge corner radius

Its just not implemented (anymore?) in the javascript.

Trying to fix that with css would be quite difficult, so this probably will have to be done by ignition.

But if you have some free time on your hand to play around with it… you could create a clip-path… but good luck finding what you need, (that is also responsive)

[data-component="ia.chart.simple-gauge"] svg > g > g:nth-child(2) > g:nth-child(1) > g > g > g > g > g > g:nth-child(1) > g > g:nth-child(1) > g:nth-child(2) > g:nth-child(1) > g > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(1) > path:{
clip-path: //...idk somethign with path() probably, maybe a clever eclipse would be enough and responsive
}

a polygon might work too, but it will be rough around the edges
There might be some tools online to make this easier.

made this with Clippy — CSS clip-path maker in like 30 seconds
i didnt replace the default image though, i guess it shouldnt be that hard to impoart the svg there so you can aline the clip better.
image

clip-path: polygon(0% 0%, 99% 0%, 98% 81%, 94% 89%, 86% 89%, 82% 85%, 81% 79%, 49% 58%, 21% 82%, 17% 91%, 8% 88%, 7% 87%, 5% 83%);
1 Like