# \[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:** 1

<div class="post-metadata">

**Author:** ![mikael.bengtsson](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mikael.bengtsson](https://forum.inductiveautomation.com/u/mikael.bengtsson)\
**Post date:** [December 9, 2019, 11:47am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/1 "2019-12-09T11:47:55Z")

</div>

Hi,  
I am configuring a bar chart in perspective to display OEE values. I want to display the value like a label on top of each bar but cannot find that feature. Is this not possible?

/Mikael

---

<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:** [February 13, 2020, 3:56pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/2 "2020-02-13T15:56:43Z")

</div>

I think i may have just figured this out.

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

Using an XY chart i created a bar graph using the column renderer. then i copied the series and changed the renderer to line. this adds the property “Bullets”. Choosing the label bullet type and then linking to the proper field in the data i was able to have labels. i set the stroke width on the line to 0 to make it disappear and played with the offset property to make the label appear at the top of the bar.

---

<div class="post-metadata">

**Author:** ![maja](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@maja](https://forum.inductiveautomation.com/u/maja)\
**Post date:** [April 1, 2020, 10:44am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/3 "2020-04-01T10:44:42Z")

</div>

Phil, Thank you for this feedback! It’s very useful.  
Do you know, maybe, is it possible to change color of the bullets label?

Thanks!

---

<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 14, 2020, 4:24pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/4 "2020-04-14T16:24:44Z")

</div>

My colleague made a post asking the same thing and last i checked there was a bug that wouldnt allow the color to be changed even if the color property was changed.

---

<div class="post-metadata">

**Author:** ![maja](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@maja](https://forum.inductiveautomation.com/u/maja)\
**Post date:** [April 14, 2020, 5:17pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/5 "2020-04-14T17:17:00Z")

</div>

Ok, Thank you very much!

---

<div class="post-metadata">

**Author:** ![mbai1](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@mbai1](https://forum.inductiveautomation.com/u/mbai1)\
**Post date:** [July 27, 2020, 12:03am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/6 "2020-07-27T00:03:45Z")

</div>

Hello thank you for sharing, and I have the same problems. But I still confuse how you did it, So you copy the series and make the render as line, what did you change the bullet.0.label to? and did you bind the label to the proper field in the data? thanks!

---

<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 27, 2020, 12:50am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/7 "2020-07-27T00:50:28Z")

</div>

The label should be the key in the data source object. In the picture I used the CycleTime key I created when I generated the data source. For your version you should replace CycleTime with whatever key you are showing on your bars.

---

<div class="post-metadata">

**Author:** ![mbai1](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@mbai1](https://forum.inductiveautomation.com/u/mbai1)\
**Post date:** [July 27, 2020, 1:14am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/8 "2020-07-27T01:14:11Z")

</div>

i got it works, thank you!

---

<div class="post-metadata">

**Author:** ![mbai1](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@mbai1](https://forum.inductiveautomation.com/u/mbai1)\
**Post date:** [August 26, 2020, 2:34pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/9 "2020-08-26T14:34:38Z")

</div>

Hello Phil,  
I am working on having the label on top of bars by your way, and it perfectly works. However, I realize that, with your way, I have to put my multiple data in the same array, which means I can’t have different colors of the bar charts. ( I understand that if I put datas in different arrays, and have column and line series for each data will work, but we adding over 50 series will be extremely slow and not doable). do you have any idea to have label on top of the bar and have different color also? thanks

---

<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:** [August 26, 2020, 2:51pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/10 "2020-08-26T14:51:22Z")

</div>

So the way i did it in the example above is that i used the deriveDataFromField property and set the fill property to the data source key for the bar color. the bar color was determined when i ran the script to get the data, i got the data and then parsed it out to figure what color the bar should be then added the key for the bar color to the data source object and finally set the data source property with the full data object.

---

<div class="post-metadata">

**Author:** ![mbai1](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@mbai1](https://forum.inductiveautomation.com/u/mbai1)\
**Post date:** [August 26, 2020, 2:55pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/11 "2020-08-26T14:55:15Z")

</div>

I got it figure out, the problem I have is that I have to set different axis, I can’t use the same Y/X axis. so basically i have different series array to achieve bars with different colors. and have additional series array with all data for the line render to achieve the label on top of the bars. thanks for your help!

---

<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:** [August 26, 2020, 2:56pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/12 "2020-08-26T14:56:59Z")

</div>

Glad to hear you got it working.

---

<div class="post-metadata">

**Author:** ![Ashok.more](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Ashok.more](https://forum.inductiveautomation.com/u/Ashok.more)\
**Post date:** [October 26, 2020, 2:16pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/13 "2020-10-26T14:16:51Z")

</div>

As per above method i have successfully displayed the values at the top of BarChart but not able to Resize & Reposition the label at the Top of Bar. It is also not resizing as per the size of the window.Kindly find the attached Screenshot for reference.

 ![ScreenShot](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/4/5428d37e14ea07c40ed2682520d0dc05e9054347.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:** [November 24, 2020, 2:57pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/14 "2020-11-24T14:57:27Z")

</div>

I have found that my method i talked about above does not work well if you have multiple bars per category. this is because the “invisible line” series doesn’t line up with its respective bar.

---

<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 7, 2021, 8:02am UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/15 "2021-07-07T08:02:47Z")

</div>

Hi Phil

I see sometimes my label relace with … even I have enough space.

 ![bar](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd24a55a24ecdc247a1a6bec185ce42915a3c5c1.jpeg)  
I play a lot with every property but nothing works for me.  
Do you know any solution for that?

---

<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 7, 2021, 2:30pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/16 "2021-07-07T14:30:37Z")

</div>

I think you may need to update the bulets.0.width or length property.

---

<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 7, 2021, 7:53pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/17 "2021-07-07T19:53:47Z")

</div>

I did it but nothing is changed.

---

<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 7, 2021, 8:06pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/18 "2021-07-07T20:06:57Z")

</div>

Weird. let me make a test chart and see if i can duplicate this behavior so i can try some things.

---

<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 7, 2021, 8:14pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/19 "2021-07-07T20:14:23Z")

</div>

Thanks just consider the orientation of bar chart which is horizontally.

I can simply replicate it by switching between preview mode and design mode (press F5)

---

<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 7, 2021, 8:16pm UTC](https://forum.inductiveautomation.com/t/feature-10589-perspective-bar-chart-value-labels/30531/20 "2021-07-07T20:16:40Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52033b49bced32c18369756d1b4385b537c90c6c.png) i used default settings and changed my chart to horizontal just to check but i didnt have this issue. when setting up this chart did you change any other bullets properties?

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