Simple gauge corner radius

do you not see the style when you select the g element?

copy the selector and change the first bits (before the svg) to match your class style
than add {display:none} after it
image

1 Like

Do I need to add }{ to the ends of the style?
Or just as you had posted it?

Sometimes the style is applying and sometimes it is not.
I change nothing, and it just appears or not willy nilly.
I can copy the json, and sometimes the style is there, and sometimes it is not when I paste it to a text editor.
Ignition 8.1.19
Pictures below are from the designer.
Below is the json, image of the black bar still showing.
Image of the code in the background for the style.


[
  {
    "type": "ia.chart.simple-gauge",
    "version": 0,
    "props": {
      "value": 20,
      "maxValue": 200,
      "arcBackground": {
        "opacity": 0
      },
      "style": {
        "classes": "perspectiveComponentModifiers/SimpleGaugeRemoveBlackLine"
      }
    },
    "meta": {
      "name": "SimpleGauge"
    },
    "position": {
      "shrink": 0,
      "basis": "175px"
    },
    "custom": {}
  }
]

All four have the same style selected. The black bar appears in all of them. It is harder to see on the right side.

it depends if you are injecting, or using the stylesheet.css

it looks like you are injecting, in which case you need }{

when injecting with a styleclass that is in a folder than you need to change the name
folders require \/ for /

.psc-FolderName\/SubFolderName\/...\/StyleName

so

} .psc-perspectiveComponentModifiers\/SimpleGaugeRemoveBlackLine 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-perspectiveComponentModifiers\/SimpleGaugeRemoveBlackLine 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;}{
1 Like

Thanks

What is the stylesheet.css technique?

in the newer version you have stylesheet.css file


there you do not need }{ as its plain css.

you will not see SimpleGaugeRemoveBlackLine in your classes dropdown this way, but you can still just type it in there

1 Like

Nice post about the gauge curve corner.