How to display values above columns in XY Chart?

Can I display values above the column bars in an XY chart? Specifically, I’m showing daily water usage and I want to have the cost of the water per day on top of each of the daily bars:

Doesn’t seem possible in 8.1.1-STABLE although it’s definitely possible in amcharts.
Maybe we can get AmGraph() method exposed? Specifically, .labelText and .labelPosition

This link is a user asking for values inside the bars because it’s currently at the top.

2 Likes

It’d be super nice if we could code this stuff ourselves like you could in Vision by drilling down to the base components… Instead of requiring IA to expose every single method/property for us to be able to make use of it :thinking:

1 Like

This is a fundamental requirement of a front-end/back-end architecture that is trying to keep the front-end secure. And uses different languages on the two ends. You are tilting at a windmill, here.

1 Like

I know you want what you want, but how about simply adding a second Y axis of cost in dollars and drawing a line graph of the cost data across it?

1 Like

That was my fallback plan :slight_smile:

Sometimes it just makes sense to go with the flow and avoid the headaches by taking the path of least resistance :grin:

Any update for this. Adding another y axis is costly for memory and loading specially for large dataset

Thanks Peter

I don’t really know how to quote on here.

did you able to present text above or inside the bar? i didn’t able to added below props to XY Chart

graph.labelText = '[[value]]'; // this will insert values in labels
graph.labelPosition = 'inside'; // and with this we put our label inside bar

Tamerplc has a question above

I also need to ask now though, how do I change the font using the technique that Peter suggested

I added a line
I set the stroke opacity 0
I enabled the bullets, set render for label
set text on the label for {valueY}
I adjusted the position with dx and dy by 10 and 10

but my text is large
So I think I want smaller text, and maybe if possible, also round the value

so when I put
text : {valueY}
maybe that is a spot I can put some css to change the font?

Or maybe since I use 8.1.0, there is a way to set this bullet value, not sure how to reference it, but maybe from background I can do it

Then I need to know what the reference is for that text I think

I am not good with css language, but also, I don't know how a person knows the name to call a setting from the property editor

Literally just select the text you want to quote and a context menu will show with a quote option

1 Like

Hello @nminchin

Were you finally able to do this?

I just literally want to show the values of each bar column above it:

I have seen this, but I do not know where to find/place it.

"
graph.labelText = ‘[[value]]’; // this will insert values in labels
graph.labelPosition = ‘inside’; // and with this we put our label inside bar

"

Can do it this way.

1 Like

Were you ever able to get this done? I was easily able to perform this on a Report bar graph, but cannot find the setting (if it exists) on a simple XYChart.

Yes, it is above in this thread.@Thomas_Magill.

I was able to get this done, the way it was suggested here, but the visualizations on this post helped a lot Perspective Bar Chart value labels - Ignition - Inductive Automation Forum