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) 
Ignition v 8.1.10
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… 
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%);
I think Nader solved it with svg.
I need some help to solve it with SVG I think.
I also want good looking gauges on my page with high responsiveness and low cost.
I saw some vision templates on the exchange, but I didn't see anything for Perspective.
I asked ChatGPT how to do it.
Is this accurate?
I am making the simple gauges like this except the background color matches the color behind or visibility is reduced via opacity, so the square ends are not visible.
I didn't check this case, but I've been reading a lot about ChatGPT. It makes pretty code if you ask it to, but not generally correct or complete. It is a human language model, not a technology model. The language description of the code it writes for you can sure sound convincing, whether the code is correct or not.
It isn't a substitute for learning something yourself.
I've been reading a lot about it as well, and I've played around with it quite a bit. It types things with a verbiage that seems super confident and factual but in reality is often completely wrong. It's wrong often enough in fact that chatGPT answers have been banned from stack overflow, and anybody who posts an answer from that source is hit with an automatic 30 day suspension.
The ChatGPT has helped me a ton already.
It usually gives me a good structure and I adapt it.
I have to tell it not to use "With" in the structure.
with query1 as ( select.....) (select * from query1)
Other than that, it has been great.
I am not sure how Stack would know or more importantly why they would care where an answer came from. They have a voting system for determining good answers and it isn't like they don't have tons of bad answers.
How do I get rid of the little line on the left?
I did not solve the original issue. I drew two. Kind of works.
Also, can I apply a style to the label in the simple gauge?
What is the best way to depict the range of the numbers?
The cornerRadius of 25 is not being applied when the value is below 12 I think.
Could you provide a demo view?
I can provide the json
[
{
"type": "ia.chart.simple-gauge",
"version": 0,
"props": {
"value": 6.74,
"maxValue": 200,
"startAngle": 135,
"endAngle": 405,
"arc": {
"cornerRadius": 25
},
"arcBackground": {
"color": "#ffffff",
"opacity": 0
},
"label": {
"offsetY": 12,
"color": "#ffffff",
"units": "%"
},
"style": {
"classes": []
}
},
"meta": {
"name": "SimpleGauge_0"
},
"position": {
"shrink": 0,
"basis": "205px"
},
"custom": {},
"propConfig": {
"props.arc.color": {
"binding": {
"type": "property",
"config": {
"path": "this.props.value"
},
"transforms": [
{
"code": "\t\n\tif 5<=value<10:\n\t\treturn '#FFFF00' \n\telif value<=5:\n\t\treturn '#00CC00'\n\telse:\n\t\treturn '#ff0000'\n\t\n",
"type": "script"
}
]
}
}
}
}
]
Add this to your stylesheet and give the gauge a class "GaugeRemoveBlackLine"
this should remove the line
.psc-GaugeRemoveBlackLine 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(4){display:none;}
.psc-GaugeRemoveBlackLine 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(2){display:none;}
Targets the text for you to style (feel free to give it another classname)
.psc-GaugeRemoveBlackLine svg text
.psc-GaugeRemoveBlackLine svg text {
font-weight: 900
}
Now I only have one issue remaining
It works when I have a value greater than 0.
When 0, it seems another, 3rd black line appears.
I tried arcBackground opacity 0 on the background object, the black bar remained.
Maybe it has a 3rd and 4th black bar location?
20 minutes ago, I worked through the below two issues I had
Was not sure what you meant when you said: You said add this to your stylesheet.
I created a new style and added what you had along with } { on the ends.
}.psc-GaugeRemoveBlackLine 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(4){display:none;}
.psc-GaugeRemoveBlackLine 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(2){display:none;}{
to the background based on my understanding of what I thought you meant for me to do.
There are two rows for the targeting because the background gauge also has the black bar I am guessing.
Then I noticed your style has a classes: and mine is abnormal I think as it appears as an array, I am in 8.1.19 .
I copied Style object from a label, and then pasted that over the style object in the simple gauge.
Worked, except when value was 0.
yeah i noticed the classes being weird too, no idea why that happend.
Do you have a black bar on yours when value is 0?
I still get the line if the value is 0
I still get the line if I set to 25 radius and the value is high enough the radius is made.
heh that looks like one i covered, i'll take another look for the number 0.
i dont see anything at 0
You put the style in a folder, did you change the name to match your style? .psc-GaugeRemoveBlackLine to .psc-perspectiveComponentModifiers\/SimpleGaugeRemoveBlackl...
Yes
When value is 0, I have a line.
When the corner radius is 25 and value is 20 or under, I have a line.
