# Ignition Perspective - Custom Progress Bar Layout in Flex Container

**URL:** <https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204>\
**Category:** Ignition\
**Tags:** ignition81, scripting, perspective\
**Created:** [August 27, 2025, 10:16am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204 "2025-08-27T10:16:31Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [August 27, 2025, 10:16am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/1 "2025-08-27T10:16:31Z")

</div>

I developed this chart, but I couldn’t find any built-in Perspective component that matches it.

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

I need to create a progress bar similar to this. I tried using a Flex Container with a Label component inside a Flex Repeater in the main view, but it didn’t render correctly in the client. I adjusted it in the view designer (tab mode), but it still didn’t scale properly with the view size.

I’m stuck on this issue. Has anyone implemented something similar? Please share your ideas or suggestions.

---

<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:** [August 27, 2025, 10:46am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/2 "2025-08-27T10:46:07Z")

</div>

- Create a flex repeater.

- Add two custom properties, `val1`and `val2` (the first two values on the chart).

- Add three labels, `label_0`, etc.  
Bind the text properties to each:  
`parent.custom.val1` (property binding)  
`parent.custom.val2` (property binding)  
`100 - {parent.custom.val1} - {parent.custom.val2}` (expression binding)

- Set grow and shrink for each label to 0.

- Add expression bindings to the `width` property of each label.  
`{parent.position.width} * {parent.custom.val1} / 100`  
`{parent.position.width} * {parent.custom.val2} / 100`  
`{parent.position.width} * (100 - {parent.custom.val1} - {parent.custom.val2}) / 100`

- Style the labels as required. (Using sytle classes is always recommended.)

- You might want to set the label text to`null` or `""` when the width is narrow.

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [August 27, 2025, 3:41pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/3 "2025-08-27T15:41:41Z")

</div>

No, you can keep three labels, but those labels should not be fixed. They should be dynamic based on my fault modes. For example, I showed three labels, but if I have 7 fault modes, then it should display 7 labels with their values. For instance, if the values are 25, 10, 15, 10, 10, 20, and 10, the progress bar should adjust accordingly based on the fault modes

---

<div class="post-metadata">

**Author:** ![code\_skin](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@code\_skin](https://forum.inductiveautomation.com/u/code_skin)\
**Post date:** [August 27, 2025, 5:27pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/4 "2025-08-27T17:27:36Z")

</div>

This looks like a horizontal stacked bar chart. The XY Chart component should be able to meet these requirements.

Man page: [Perspective - XY Chart | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-chart-palette/perspective-xy-chart)

Samples showing different data values:

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

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

JSON attached.

```json
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "percent",
          "label": {
            "enabled": false,
            "text": "Percent",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "value",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d"
          },
          "value": {
            "range": {
              "max": 100,
              "min": 0,
              "useStrict": true
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#'%'"
          },
          "appearance": {
            "opposite": true,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "category",
          "label": {
            "enabled": false,
            "text": "category",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "Improper Lubrication",
          "label": {
            "text": "Improper Lubrication"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "data",
            "x": "improperLubrication",
            "y": "category"
          },
          "xAxis": "percent",
          "yAxis": "category",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueX}[/]%",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "#F6B26B",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        },
        {
          "name": "Misalignment",
          "label": {
            "text": "Misalignment"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "data",
            "x": "misalignment",
            "y": "category"
          },
          "xAxis": "percent",
          "yAxis": "category",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueX}[/]%",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "#93C47D",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        },
        {
          "name": "Structural looseness",
          "label": {
            "text": "Structural looseness"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "data",
            "x": "structuralLooseness",
            "y": "category"
          },
          "xAxis": "percent",
          "yAxis": "category",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueX}[/]%",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "#CC0000",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "style": {
        "marginRight": "100px",
        "paddingRight": "100px"
      },
      "dataSources": {
        "data": [
          {
            "category": "",
            "improperLubrication": 10,
            "misalignment": 80,
            "structuralLooseness": 10
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart"
    },
    "position": {
      "x": 1254,
      "y": 11,
      "width": 925,
      "height": 179
    },
    "custom": {}
  }
]

```

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [August 29, 2025, 5:17am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/5 "2025-08-29T05:17:56Z")

</div>

Thanks, @code_skin it’s working.

Is it possible to increase the chart width? Currently, I’m using the chart in a small view, and there is too much gap on the right side compared to the left. It would be better if we could increase the width on the right side to maintain equal gaps.

---

<div class="post-metadata">

**Author:** ![code\_skin](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@code\_skin](https://forum.inductiveautomation.com/u/code_skin)\
**Post date:** [August 29, 2025, 2:38pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/6 "2025-08-29T14:38:25Z")

</div>

Just remove the padding/margin keys from self.props.styles

`{`  
`"classes": "",`  
`"paddingRight": "100px",`  
`"marginRight": "100px"`  
`}`

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [September 2, 2025, 2:10pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/7 "2025-09-02T14:10:19Z")

</div>

Thanks! Yes, I’ve got it working for all requirements. However, when I hover over the chart, it shows the key and value. By default, I want the value to be displayed on the chart. Is there an option for this?

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [September 4, 2025, 3:33pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/8 "2025-09-04T15:33:48Z")

</div>

Has anyone done? Please give an idea or a suggestion

---

<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 4, 2025, 8:19pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/9 "2025-09-04T20:19:49Z")

</div>

`series.x.tooltip.text`

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [September 5, 2025, 4:38am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/10 "2025-09-05T04:38:59Z")

</div>

In the XY chart series, there is no option for 'x' inside the series. For the first element in series 0, the tooltip option is available but does not appear. I also tried the x-axis properties, where the tooltip text option is present, but it still does not appear inside the chart bar. Could you please elaborate on how I can try this or if there is another way to achieve it?

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

---

<div class="post-metadata">

**Author:** ![Cose\_Peter1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cose_peter1/32/79174_2.png) [@Cose\_Peter1](https://forum.inductiveautomation.com/u/Cose_Peter1)\
**Post date:** [September 5, 2025, 5:21am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/11 "2025-09-05T05:21:31Z")

</div>

When I used @code_skin 's horizontal stacked chart, I was able to see the tool tip.

 ![Screenshot 2025-09-05 at 10.48.37 am](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/6465eb8f30fc58cf270ceb6c6c0e9d2deb6bfec2.png)

SInce you only want the value just set it as : `[bold]{valueX}[/]%`

---

<div class="post-metadata">

**Author:** ![Cose\_Peter1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cose_peter1/32/79174_2.png) [@Cose\_Peter1](https://forum.inductiveautomation.com/u/Cose_Peter1)\
**Post date:** [September 5, 2025, 5:31am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/12 "2025-09-05T05:31:03Z")

</div>

Or is this what you want?

 ![Screenshot 2025-09-05 at 10.59.29 am](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/57c64a19f6482db49efcf663dab3bf41b9190ff1.png)

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [September 5, 2025, 5:48am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/13 "2025-09-05T05:48:11Z")

</div>

no, I need to show like this

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

---

<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 5, 2025, 8:00am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/14 "2025-09-05T08:00:55Z")

</div>

> [@ARIFRAHUMAN\_A](#):
>
> In the XY chart series, there is no option for 'x' inside the series.

'x' is the series number. You need to edit  
`series.0.tooltip.text : [bold]{valueX}[/]%`  
`series.1.tooltip.text : [bold]{valueX}[/]%`  
`series.2.tooltip.text : [bold]{valueX}[/]%`

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [September 5, 2025, 10:01am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/15 "2025-09-05T10:01:57Z")

</div>

> [@Transistor](#):
>
> [bold]{valueX}[/]%

Yes, it is there, but it only appears when I hover the mouse over the chart. I need those values to be visible permanently when the view is opened.

---

<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 5, 2025, 10:44am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/16 "2025-09-05T10:44:05Z")

</div>

You might have to do a variation of [[FEATURE-10589] Perspective Bar Chart value labels - #2 by Phil\_B](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/2).

Note that my Label component solution in post #2 would do this very simply.

---

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [September 5, 2025, 12:57pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-custom-progress-bar-layout-in-flex-container/110204/17 "2025-09-05T12:57:20Z")

</div>

Yes, I saw the post, but that requirement is different. In the render option, I used column selection, whereas in post #2 they used the line option, which does not appear correctly. I tried it, but is there any option available for this? Could you please share?