# ApexCharts Bar chart unique bar colors **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [March 12, 2025, 4:21pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584 "2025-03-12T16:21:11Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [March 12, 2025, 4:21pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/1 "2025-03-12T16:21:12Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/25c10f43762364014c1ae4aca2c5e24f92ecf59f.png) ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [March 12, 2025, 6:23pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/2 "2025-03-12T18:23:29Z")
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: ```python function ({value, seriesIndex, w}) {if (value >= w.config.series[1].data[seriesIndex]) {return "#00FF00"} else {return "#FF0000"}} ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b3a328250422f91ea34dfabe8a9e3d18dc61bc20.png) ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [March 12, 2025, 6:40pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/3 "2025-03-12T18:40:11Z")
Where would I put this function in ignition? would it be a script or a binding? ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [March 12, 2025, 7:45pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/4 "2025-03-12T19:45:01Z")
My example replaced colors[1]. ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [March 12, 2025, 7:55pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/5 "2025-03-12T19:55:16Z")
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? ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [March 12, 2025, 8:57pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/6 "2025-03-12T20:57:32Z")
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 ```python function ({value, dataPointIndex, w}) {if (w.config.series[0].data[dataPointIndex] < w.config.series[1].data[dataPointIndex]) {return "#942222"} else {return "#2E6F40"}} ``` ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [March 12, 2025, 8:58pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/7 "2025-03-12T20:58:44Z")
There you go. I was trying to figure out why dataPointIndex wouldn't work for me. lol ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [March 12, 2025, 9:36pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/8 "2025-03-12T21:36:37Z")
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.](https://www.apexcharts.com/docs/options/) Just FYI, most likely for future me. ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [March 12, 2025, 9:47pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/9 "2025-03-12T21:47:06Z")
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? ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [March 13, 2025, 10:04am UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/10 "2025-03-13T10:04:06Z")
_legend.markers.fillColors_ > **[legend – ApexCharts.js](https://apexcharts.com/docs/options/legend/)** > > legend: { show: true, showForSingleSeries: false, showForNullSeries: true, showForZeroSeries: true, position: 'bottom', horizontalAlign: 'center', floating: false, fontSize: '14px', fontFamily: 'Helvetica, Arial', fontWeight: 400, formatter:... ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [March 13, 2025, 6:37pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/11 "2025-03-13T18:37:07Z")
Unfortunately, for some reason that did not work and the real data does not appear. Are there any suggestions? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1aa5dace4b7a24dc8d79a08743b78b0d95d77990.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/d/7d8da9ba021b1ff0dd619209e768632068853c78.png) ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [March 13, 2025, 6:55pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/12 "2025-03-13T18:55:44Z")
fillColors need to be an array. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3a0e5514e75e16015342f222bbbb61a275825f3c.png) ---
**Author:** ![richhull](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@richhull](https://forum.inductiveautomation.com/u/richhull)\ **Post date:** [March 13, 2025, 7:00pm UTC](https://forum.inductiveautomation.com/t/apexcharts-bar-chart-unique-bar-colors/103584/13 "2025-03-13T19:00:27Z")
Worked Great Thank You!!!