Perspective Bar Chart value labels

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!

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.

1 Like

i got it works, thank you!

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

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.

1 Like

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!

1 Like

Glad to hear you got it working.

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.

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.

Hi Phil

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

I play a lot with every property but nothing works for me.
Do you know any solution for that?

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

I did it but nothing is changed.

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

1 Like

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)

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?

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.

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.

1 Like

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?

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.


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.

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...