Simple gauge corner radius

Anyone knows how to make the simple gauge look like the one in the example in the user manual, with nice rounded corners on the arc background? (see the below figure).


The arc itself has a cornerRadius property, which result in the rounded corners on the orange arc. But it does not seem to affect the arc background corner radius. Most likely something simple I have missed here? (see the below figure) :stuck_out_tongue:


Ignition v 8.1.10

1 Like

does no longer seem to be possible at first glance

This doesn’t seem possible, which raises the question of how that screenshot was made…


Is there a reason this isn’t possible? Is it technically difficult or just not implemented? I have OCD (most likely) and details like this keep me up at night… :hugs:

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.

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