# Gauge Object Center and Vertical Line for Clock Use

**URL:** <https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 25, 2025, 1:18pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972 "2025-09-25T13:18:31Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![bpomerhn](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@bpomerhn](https://forum.inductiveautomation.com/u/bpomerhn)\
**Post date:** [September 25, 2025, 1:18pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/1 "2025-09-25T13:18:31Z")

</div>

I used a gauge object to create animated clock hands to overlay on a Client’s logo.

Is there a way to eliminate the center circle at the hand arbor? It is too large.

Also, there is a grey line extending from the hand arbor up to the 12 o’clock position. Is it possible to eliminate that?

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [September 25, 2025, 10:24pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/2 "2025-09-25T22:24:06Z")

</div>

You’ll have to tell us if it’s Perspective or Vision?

---

<div class="post-metadata">

**Author:** ![bpomerhn](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@bpomerhn](https://forum.inductiveautomation.com/u/bpomerhn)\
**Post date:** [September 25, 2025, 11:07pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/3 "2025-09-25T23:07:09Z")

</div>

Sorry, Ignition 8.1. Perspective. I hope I formatted the code correctly:

`[`  
`{`  
`"type": "ia.chart.gauge",`  
`"version": 0,`  
`"props": {`  
`"startAngle": -90,`  
`"endAngle": 270,`  
`"outerAxis": {`  
`"maxValue": 12,`  
`"width": 16,`  
`"color": "#D5D5D500",`  
`"ranges": [`  
`{`  
`"start": 0,`  
`"end": 0,`  
`"width": 0,`  
`"color": "#D5D5D500"`  
`}`  
`],`  
`"needle": {`  
`"reach": 75,`  
`"color": "#000000"`  
`},`  
`"tickMarks": {`  
`"color": "#C0C0C000",`  
`"thickness": 0`  
`},`  
`"data": "value",`  
`"percentRadius": 75,`  
`"show": true`  
`},`  
`"innerAxis": {`  
`"maxValue": 60,`  
`"width": 1,`  
`"color": "#C0C0C000",`  
`"ranges": [`  
`{`  
`"start": 0,`  
`"end": 0,`  
`"width": 0,`  
`"color": "#77b6d800"`  
`}`  
`],`  
`"needle": {`  
`"color": "#000000"`  
`},`  
`"tickMarks": {`  
`"color": "#C0C0C000"`  
`},`  
`"data": "secondaryValue",`  
`"percentRadius": 85,`  
`"show": true`  
`},`  
`"animate": true,`  
`"backgroundColor": "#C0C0C000"`  
`},`  
`"meta": {`  
`"name": "Gauge_1"`  
`},`  
`"position": {`  
`"x": 0.0885,`  
`"y": 0.0213,`  
`"height": 0.1,`  
`"width": 0.8143`  
`},`  
`"custom": {},`  
`"propConfig": {`  
`"props.secondaryValue": {`  
`"binding": {`  
`"config": {`  
`"fallbackDelay": 2.5,`  
`"mode": "direct",`  
`"tagPath": "[TNC_Provider]SJEC/CTRL/MINUTES"`  
`},`  
`"type": "tag"`  
`}`  
`},`  
`"props.value": {`  
`"binding": {`  
`"config": {`  
`"fallbackDelay": 2.5,`  
`"mode": "direct",`  
`"tagPath": "[TNC_Provider]SJEC/CTRL/HOURS"`  
`},`  
`"type": "tag"`  
`}`  
`}`  
`},`  
`"events": {`  
`"dom": {`  
`"onClick": {`  
`"config": {`  
`"params": {},`  
`"view": "SCREENS/TNC WRF/LOGINS"`  
`},`  
`"scope": "C",`  
`"type": "nav"`  
`}`  
`}`  
`}`  
`}`  
`]`

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 25, 2025, 11:12pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/4 "2025-09-25T23:12:00Z")

</div>

> [@bpomerhn](#):
>
> I hope I formatted the code correctly:

Close, but you've formatted it as a quotation, not a code block. Please see [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831) and then edit to fix. I've added the Perspective tag below the title.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 25, 2025, 11:24pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/5 "2025-09-25T23:24:45Z")

</div>

I popped your code into a view and launched it in a browser, press F12 (Developer Tools) and use the Inspect Tool to highlight the dot.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/4/0439bac395fc27d0d2a006f3d58b10566ca0b1c5.png)

The circle starts with a radius of 5. If you edit the HTML you can play with the size. Making the value larger will increase the size of the dot. Making it smaller works until you get to 5 again and it doesn't get any smaller. The minimum value must be hard-coded.

---

<div class="post-metadata">

**Author:** ![bpomerhn](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@bpomerhn](https://forum.inductiveautomation.com/u/bpomerhn)\
**Post date:** [September 25, 2025, 11:40pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/6 "2025-09-25T23:40:54Z")

</div>

Okay, how would I go about hard coding that? I’m afraid you are way above my head with some of the things you are talking about.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 25, 2025, 11:44pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/7 "2025-09-25T23:44:23Z")

</div>

> [@bpomerhn](#):
>
> ... how would I go about hard coding that?

Sorry, the vendor has hard-coded it which means that it can't be overridden by us. I had a quick look to see if it could be made transparent but I couldn't see a way.

Developer Tools is built into nearly all modern browsers. You can use it to debug web pages. Hit F12, click the Inspect button on the top left and then hover around the web page. Click on the object of interest and you will see the HTML and CSS code.

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [September 25, 2025, 11:49pm UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/8 "2025-09-25T23:49:02Z")

</div>

You can use CSS to adjust the scale rather than overriding the radius!

```css
.psc-hidecircle circle{
/* If you want to hide entirly */
/* visibility: hidden;*/
/* I think this looks better with a little roundness*/
    scale: 0.5;
}

```

Add the class `hidecircle` to the gauge

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8a382f6744c3b7c99a8bc6733b3e69fb2cd9420.png)

---

<div class="post-metadata">

**Author:** ![bpomerhn](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@bpomerhn](https://forum.inductiveautomation.com/u/bpomerhn)\
**Post date:** [September 26, 2025, 12:23am UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/9 "2025-09-26T00:23:36Z")

</div>

You guys have no idea how much I just learned in a few of your responses. I have a long way to go with Ignition.

Can the vertical gray line be eliminated the same way?

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [September 26, 2025, 12:40am UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/10 "2025-09-26T00:40:44Z")

</div>

It’s a bit of a hack in the CSS, the lines don’t really have any special classes or positions to target with a selector. So, we can simply grab the exact path data as our selector.

```css
.psc-hidecircle path[d=" M0,0 L0,-101.32 "],path[d=" M0,0 L0,-89.4 "]{
    visibility: hidden;
}

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3aea89bb0f3dbcb531050b3a9f5f47c038055788.png)

---

<div class="post-metadata">

**Author:** ![bpomerhn](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@bpomerhn](https://forum.inductiveautomation.com/u/bpomerhn)\
**Post date:** [September 26, 2025, 1:02am UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/11 "2025-09-26T01:02:27Z")

</div>

Thanks. I can find that object and select it in developer tools, but how are you getting -101.32 and -89.4? I see the below. There is probably a ton more I need to learn to understand this. Do you have any recommendations on getting started?

```python
d: path("M 0 -6.8 L 0 3.2");

```

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [September 26, 2025, 3:29am UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/12 "2025-09-26T03:29:54Z")

</div>

It looks like the arms are being dynamically generated. If you change the size of the gauge then the path changes.

In that case you can substitute the path with your own (and never change the size)

Or you can actually use pseudo selectors with conditions like first child of type g etc.

It might end up looking like a pretty crazy selector. I can give it a try when I get some time.

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [September 26, 2025, 4:15am UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/13 "2025-09-26T04:15:48Z")

</div>

I’m not proud of this, I’m certain there is a more elegant way of representing the CSS selector. However, it seems to work on any sized gauge.

```css
.psc-hidecircle g[role="region"] :first-child :first-child :first-child :first-child :first-child :first-child :first-child :first-child :nth-child(2) :first-child :first-child :nth-child(5) :first-child :first-child :first-child :first-child :first-child :nth-child(2){
	visibility: hidden;
}
.psc-hidecircle g[role="region"] :first-child :first-child :first-child :first-child :first-child :first-child :first-child :first-child :nth-child(2) :first-child :first-child :nth-child(3) :first-child :first-child :first-child :first-child :first-child :nth-child(2) {
	visibility: hidden;
}
.psc-hidecircle g[role="region"] :first-child :first-child :first-child :first-child :first-child :first-child :first-child :first-child :nth-child(2) :first-child :first-child :nth-child(3) :first-child :first-child :first-child :first-child :first-child :nth-child(4) {
	visibility: hidden;
}

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/8/b853ea29a13df6d265c6e0d71f1c76f292c160d0.png)

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [September 26, 2025, 6:47am UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/14 "2025-09-26T06:47:54Z")

</div>

That’s definitely a CSS hack if I ever saw one. Well played.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 26, 2025, 8:01am UTC](https://forum.inductiveautomation.com/t/gauge-object-center-and-vertical-line-for-clock-use/110972/15 "2025-09-26T08:01:06Z")

</div>

> [@dgillbee](#):
>
> `scale: 0.5;`

Nice! I may have missed that possibility in some other cases.