# Simple Gauge Background Arc Length

**URL:** <https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 19, 2025, 2:42pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411 "2025-05-19T14:42:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ryan\_Marsh](https://avatars.discourse-cdn.com/v4/letter/r/ad7895/32.png) [@Ryan\_Marsh](https://forum.inductiveautomation.com/u/Ryan_Marsh)\
**Post date:** [May 19, 2025, 2:42pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411/1 "2025-05-19T14:42:28Z")

</div>

I've got a view in Perspective that shows several different simple gauges with different maxValues. I've noticed that when I increase the maxValue property the length of the background arc shrinks.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/2906d1d1f3de9836f9b5c63731460165e78f5649.png)

These 2 gauges will be set with bindings on the maxValues so they change based on what is being measured. When the view reloads, the background arc resets to the correct length, but with the bindings enabled they never reset. Below are the JSONs for both gauges and their parent containers

This is on Ignition 8.1.47

```python
[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_1"
    },
    "position": {
      "x": 457,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC1",
      "Title": "PandA Line 1"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 600,
          "maxValue": 1200,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 1",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]

```

```python
[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_2"
    },
    "position": {
      "x": 789,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC2",
      "Title": "PandA Line 2"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 12,
          "maxValue": 24,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 2",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]

```

---

<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:** [May 19, 2025, 4:19pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411/2 "2025-05-19T16:19:42Z")

</div>

1. I suggest that you post the JSON of each gauge here (see [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831)) so we can reproduce the problem. For debugging it would be useful if you set different colors for the `arc` and `arcBackground` if you haven't already and set the `value` to 50% of max.
2. What version are you running?

---

<div class="post-metadata">

**Author:** ![Ryan\_Marsh](https://avatars.discourse-cdn.com/v4/letter/r/ad7895/32.png) [@Ryan\_Marsh](https://forum.inductiveautomation.com/u/Ryan_Marsh)\
**Post date:** [May 19, 2025, 7:46pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411/3 "2025-05-19T19:46:32Z")

</div>

I was wrong in my original post (which I will update after this). When I change the max Value, at first the background arc will shrink, but will correct itself on reload (in designer or perspective workstation) however the full system will have a tag binding on the max value based on what's being displayed (CPM, CPH, CPD) and when I enable those bindings the arc never corrects itself on reload.

Below are the JSONs for the 2 gauges as well as their parent components (I included because the bindings reference the parents).

This is on Ignition 8.1.47

```python
[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_1"
    },
    "position": {
      "x": 457,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC1",
      "Title": "PandA Line 1"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 600,
          "maxValue": 1200,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 1",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]

```

```python
[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_2"
    },
    "position": {
      "x": 789,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC2",
      "Title": "PandA Line 2"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 12,
          "maxValue": 24,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 2",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]

```

---

<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:** [May 19, 2025, 8:48pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411/4 "2025-05-19T20:48:18Z")

</div>

I haven't managed to replicate the problem. All looks OK so far.

> [@Ryan\_Marsh](#):
>
> **When the view reloads** , the background arc resets to the correct length

This bit concerns me a little. For example, views read parameters on load but never refer to them again. You don't seem to be doing anything with parameters as far as I can see.

Why and how are you reloading the view?

---

<div class="post-metadata">

**Author:** ![Ryan\_Marsh](https://avatars.discourse-cdn.com/v4/letter/r/ad7895/32.png) [@Ryan\_Marsh](https://forum.inductiveautomation.com/u/Ryan_Marsh)\
**Post date:** [May 19, 2025, 9:08pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411/5 "2025-05-19T21:08:58Z")

</div>

all this is within a tab container, so I tab away, then tab back

---

<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:** [May 19, 2025, 9:27pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411/6 "2025-05-19T21:27:34Z")

</div>

Try making the troublesome tab persistent so it doesn't need to reload.

 ![Tab persistent](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/f/0f7b6cb2b6a202f8a0cf4337a3a2a05a0a8cebf6.png)

Right-click ...

---

<div class="post-metadata">

**Author:** ![Ryan\_Marsh](https://avatars.discourse-cdn.com/v4/letter/r/ad7895/32.png) [@Ryan\_Marsh](https://forum.inductiveautomation.com/u/Ryan_Marsh)\
**Post date:** [May 20, 2025, 2:41pm UTC](https://forum.inductiveautomation.com/t/simple-gauge-background-arc-length/106411/7 "2025-05-20T14:41:44Z")

</div>

The tabs were already set to persistent

I reached out to Inductive Automation Support about it and was just told this was a known bug:

> If the “maxValue” and the "minValue" of the Component is changed in the Designer when the Component is selected or via scripting, the component adjusts accordingly but the arcBackground does not appear until we toggle the Preview mode or close/reopen the view.

I found a work around by using a simple gauge with no values set behind the real one to act as a background for now.