# \[FEATURE-10589\] Perspective Bar Chart value labels

**URL:** <https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 9, 2019, 11:47am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531 "2019-12-09T11:47:55Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 8, 2021, 6:17pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/21 "2021-07-08T18:17:26Z")

</div>

Your setting is exactly my setting and I think if press F5 several times (trigger between preview mode) you will see this bug.  
As I told you, the bug only happens randomly when the chart is updated or the page is refreshed or in designer, you trigger preview mode.

---

<div class="post-metadata">

**Author:** ![Phil\_B](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@Phil\_B](https://forum.inductiveautomation.com/u/Phil_B)\
**Post date:** [July 8, 2021, 6:42pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/22 "2021-07-08T18:42:12Z")

</div>

Yes i did try preview mode as you are correct that sometimes going into preview things change. i have also pushed a version of this to our live project and i do not have any issues. This maybe something that Inductive technical support can help with. they know all the properties and how they affect components much better than i do.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 10, 2021, 6:53am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/23 "2021-07-10T06:53:33Z")

</div>

I finally find the bug. When I put the XY chart in a flex container it shrinks without looking shrink, grow settings, so I have to put the XY chart in XY coordinate container first and then put it in flex.  
The problem appears when I change the XY coordinate container mode to percent.  
For solving this bug, I simply change it to fixed mode and use width: 100%, height: 100% instead.

My only problem is how to change its style?

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [February 4, 2022, 9:10pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/24 "2022-02-04T21:10:17Z")

</div>

> [@Time Series chart xtrace font](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/13):
>
> No you are correct, but some of the variables on there already are defined so you will need to use !important… its kinda hard to know when to use it xd } .time-series-chart-component .ia\_timeMarker \> g \> text{font-size:14px !important;} .ia\_timeSeriesChartComponent\_\_labelText{font-size:14px;}{

In this thread, I got some help with style changing some with CSS

I have a different question though.  
I want my legend to appear at the top, but with the second series, I am not sure how to hide that label specifically in the legend.

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

{name}  
shows both names from each series

* * *

oh, apparently, I can just delete the name in the duplicated series, and since the value shown is determined in the label, the numbers still show correctly.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/87535ce6d876cda7b1ff4672309d8b237cb09c96.png)

---

<div class="post-metadata">

**Author:** ![patrick.maltais](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/patrick.maltais/32/3958_2.png) [@patrick.maltais](https://forum.inductiveautomation.com/u/patrick.maltais)\
**Post date:** [November 18, 2022, 10:27pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/25 "2022-11-18T22:27:07Z")

</div>

For color, font size and so on, you can use the series tooltip.text formatting.  
For example, setting the bullet's label.text to "[bold;#CC3333;font-size:20px]{field}" makes the label on top of the bar display "field" as a red, bold text with size 20px.  
I'm still looking for the documentation on how I can pass multiple styles.  
It would also be cool to make the label appear depending on some condition. For example, if a bar has the value 0, I don't see the point in displaying "0" and no bar...

---

<div class="post-metadata">

**Author:** ![sajid\_ali\_shah](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@sajid\_ali\_shah](https://forum.inductiveautomation.com/u/sajid_ali_shah)\
**Post date:** [June 16, 2023, 7:06am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/26 "2023-06-16T07:06:20Z")

</div>

how its possibe first my data is come data set then follow this prop then not coming bar chart only showing line chart and value

---

<div class="post-metadata">

**Author:** ![Phil\_B](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@Phil\_B](https://forum.inductiveautomation.com/u/Phil_B)\
**Post date:** [June 16, 2023, 2:42pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/27 "2023-06-16T14:42:49Z")

</div>

to get the bar chart you need to make a series with the render property set to bar. My example on this was to create a line with labels to go in addition to the bars.

---

<div class="post-metadata">

**Author:** ![Phillip\_Hail](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@Phillip\_Hail](https://forum.inductiveautomation.com/u/Phillip_Hail)\
**Post date:** [June 30, 2023, 8:18pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/28 "2023-06-30T20:18:23Z")

</div>

> **[Perspective Bar Chart (XYChart) value labels | Ignition Features and Ideas |...](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/perspective-bar-chart-xychart-value-labels)**
>
> When displaying a XYChart as a Bar Chart it would be great to display the value on top of each bar like you can do in Vision.

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [October 26, 2023, 7:23am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/29 "2023-10-26T07:23:02Z")

</div>

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

It doesn't show up even though you did the same thing you chose.

What should I do to get the value?

---

<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:** [October 26, 2023, 8:02am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/30 "2023-10-26T08:02:46Z")

</div>

> [@jiyoung\_hwang1](#):
>
> It doesn't show up ...

The answer is in post #2. You can't apply labels to columns. You need to copy **series 0** to **series 1** and render that as a **line**. Then copy the settings shown in post #2. You can make the line and bullets invisible so that only the labels show.

---

<div class="post-metadata">

**Author:** ![dan\_mueller](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@dan\_mueller](https://forum.inductiveautomation.com/u/dan_mueller)\
**Post date:** [December 7, 2023, 9:30pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/31 "2023-12-07T21:30:48Z")

</div>

Anyway I can change the color of the text?

---

<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:** [December 7, 2023, 9:34pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/32 "2023-12-07T21:34:02Z")

</div>

Dan, you need to be more specific. Change the color of _what_ text.

---

<div class="post-metadata">

**Author:** ![dhiraj.pawar](https://avatars.discourse-cdn.com/v4/letter/d/3ec8ea/32.png) [@dhiraj.pawar](https://forum.inductiveautomation.com/u/dhiraj.pawar)\
**Post date:** [July 8, 2024, 5:51am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/33 "2024-07-08T05:51:22Z")

</div>

Hello Phil\_B,  
As you I did the same but it's not working me. Can you help me on this?

\*\*Expected Chart: This comparison of different values with respect to time for last 10 different time. Each bar should be showing its value.

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

When I'm apply property as you suggested getting below result.

 ![Trend_01](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/8/3873f26b388555c8d8093dc24c7d8b6a635487f0.png)

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

---

<div class="post-metadata">

**Author:** ![anthony\_ho](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@anthony\_ho](https://forum.inductiveautomation.com/u/anthony_ho)\
**Post date:** [October 10, 2024, 8:34pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/34 "2024-10-10T20:34:34Z")

</div>

If you push the label below the top of the bar, essentially you don't display the "0". Or better yet, use the deriveFieldsFromData to make the label or bullet disappear, like the thumb-up icon only appears for the max bar.

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

---

<div class="post-metadata">

**Author:** ![s.b.srinivasan](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@s.b.srinivasan](https://forum.inductiveautomation.com/u/s.b.srinivasan)\
**Post date:** [April 27, 2026, 6:35pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/35 "2026-04-27T18:35:31Z")

</div>

Hi Phil

I was facing issue in visibility of the label on top of xy charts.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/0145cec53d110611119558e67a8557967aacf7b9.png)

You can see my label data was cutting in top. I did tired to adjust the position.dx, dy property, It works for some data but not for some.

If value if 197 secs it works when I set dy to 0, same not working if secs is 0.6 value in chart.

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

Can you please help me with this?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [April 27, 2026, 6:40pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/36 "2026-04-27T18:40:21Z")

</div>

Why don't you push the label to the top of the bar, with a positive `dy`, instead of below?

---

<div class="post-metadata">

**Author:** ![s.b.srinivasan](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@s.b.srinivasan](https://forum.inductiveautomation.com/u/s.b.srinivasan)\
**Post date:** [April 27, 2026, 7:06pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/37 "2026-04-27T19:06:12Z")

</div>

Thank you for your reply. Yes I did tried. But same. It work for few values but not for others

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

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

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [April 27, 2026, 7:20pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/38 "2026-04-27T19:20:02Z")

</div>

Try with `dy` equal to -10 or more. To get it above the bar, it needs to be negative not positive, my bad on that.

---

<div class="post-metadata">

**Author:** ![s.b.srinivasan](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@s.b.srinivasan](https://forum.inductiveautomation.com/u/s.b.srinivasan)\
**Post date:** [April 27, 2026, 7:32pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/39 "2026-04-27T19:32:23Z")

</div>

Yeah correct. But seems some what it still cuts. I tired with -1 now.

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

---

<div class="post-metadata">

**Author:** ![Phil\_B](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@Phil\_B](https://forum.inductiveautomation.com/u/Phil_B)\
**Post date:** [April 27, 2026, 7:56pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/40 "2026-04-27T19:56:36Z")

</div>

there is no good way to make it dynamic based on the value of the bar. i would adjust the text to be just above the bar and then on the y axis max value put a binding that takes the highest value of any bar and adds 10%. that way there is space in the chart above the bars to show the value.

[Previous page](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531.md?page=1)

[Next page](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531.md?page=3)
