ApexCharts Bar chart unique bar colors

Ignition
,
1

I am currently working with the ApexCharts module and I am trying to create a comparison bar chart. What I want to do is have one set of bars be a base value we want to compare with real values. I am trying to get it to work where if the bar is below the base value it will be green, and when above it will be red. However, every attempt I make to change their color value changes both and not one or another. Like what if one real value is below the base value and the other is above, one of the bars should be green and the other red.

How should I approach this?

image
image566×286 6.58 KB

1 Like
2

I'm assuming we're talking about the second series compared to the first series?

If so, you can use a function for the series color:

function ({value, seriesIndex, w}) {if (value >= w.config.series[1].data[seriesIndex]) {return "#00FF00"} else {return "#FF0000"}}

image
image517×221 18.2 KB

1 Like
3

Where would I put this function in ignition? would it be a script or a binding?

4

My example replaced colors[1].

1 Like
5

It worked thanks! I am still confused on how it works though. If you have time could you explain how this function is grabbing values and running through?

6

Took me a while going through stack overflow and documentation, finally understand what you are doing. I've modified my code to work for what I need. Thank you

function ({value, dataPointIndex, w}) {if (w.config.series[0].data[dataPointIndex] < w.config.series[1].data[dataPointIndex]) {return "#942222"} else {return "#2E6F40"}}
2 Likes
7

There you go. I was trying to figure out why dataPointIndex wouldn't work for me. lol

2 Likes
8

I've been using ApexCharts recently for a project, and just wanted to mention that ChatGPT does an excellent job suggesting which properties to change, if not outright providing the exact properties and values you need. If it doesn't give the exact answer, it will get close enough to look up the exact setting in the Options doc page.

Just FYI, most likely for future me.

1 Like
9

Another thing, I just now noticed the legend color for the real data disappearing. Would you know where I should look to add that color back?

10

legend.markers.fillColors

1 Like
11

Unfortunately, for some reason that did not work and the real data does not appear. Are there any suggestions?

image

image
image243×316 9.61 KB

12

fillColors need to be an array.

image
image1309×554 49.3 KB

2 Likes
13

Worked Great Thank You!!!

1 Like