# How do I get bars on a bar graph (XY chart component) to be different colors?

**URL:** <https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954>\
**Category:** Ignition\
**Created:** [April 1, 2022, 8:27pm UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954 "2022-04-01T20:27:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mesham](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@mesham](https://forum.inductiveautomation.com/u/mesham)\
**Post date:** [April 1, 2022, 8:27pm UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954/1 "2022-04-01T20:27:19Z")

</div>

Hey everyone,

I have a simple bar chart and want the bars for each category to be different colors.

![barchart](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6c387fd9b97e9cde338a131571df78de85e4e4c2.png)

This seems like it should be fairly simple, but I’m not seeing where the option is.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 1, 2022, 10:16pm UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954/2 "2022-04-01T22:16:04Z")

</div>

> How do I get bars on a bar graph (XY chart component) to be different colors?

I think that in general one doesn't do that. The idea with the bar chart is that the bar heights indicate the relative values. Your chart has only **one series** - a series of categories in your case. Adding colour adds a confusing visual - "This bar is green and the next one is orange! What does that signify?". Ask yourself how adding colour would make the information you are conveying clearer. (It most likely wouldn't.) You could go as far as asking why you've used blue. Is it to match the theme of the page or site (which would be appropriate)? If you had used grey what would have been lost?

If you insist then you may have to create three series but you will have to do some work to introduce the gaps in a way that makes sense and you'll have trouble with the labels.

There's a [guide on how best to structure charts commonly used in statistical commentary](https://style.ons.gov.uk/category/data-visualisation/chart-design/) provided by the UK Office for National Statistics which has some good examples.

---

<div class="post-metadata">

**Author:** ![josborn](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@josborn](https://forum.inductiveautomation.com/u/josborn)\
**Post date:** [April 2, 2022, 12:11am UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954/3 "2022-04-02T00:11:47Z")

</div>

While I don’t disagree, i will comment that this is actually pretty common with other reporting tools. Crystal reports, for example, defaults to different bar colors based on change of group. My report-foo in Ignition is weak, I cant help with changing the colors ):

Edit:  
Woops, for some reason i assumed this was a reporting question.

---

<div class="post-metadata">

**Author:** ![mesham](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@mesham](https://forum.inductiveautomation.com/u/mesham)\
**Post date:** [April 4, 2022, 1:41pm UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954/4 "2022-04-04T13:41:42Z")

</div>

Thanks for the feedback. In all honesty, I’m just trying to digitize charts that are currently created in Excel and then printed out and hung on a board. Those charts have different color bars for the different categories. I don’t knwo why they were made that way in the first place and I am, at this point, just trying to get a 1-to-1 conversion of those charts.

I played around a bit with having different series, but of course, the bars stacked on top of each other by default. I don’t know that it is worth the time to try to get them unstacked.

If there is no easy way to make the bars different colors, I can just leave them as different colors.

---

<div class="post-metadata">

**Author:** ![Joel\_Farley](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@Joel\_Farley](https://forum.inductiveautomation.com/u/Joel_Farley)\
**Post date:** [January 23, 2024, 7:54am UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954/5 "2024-01-23T07:54:06Z")

</div>

Old post, but I'll leave this here for the next one of us re-creating someone's printed out and hung up excel spreadsheets.

I have a performance metric that they want to show green if above the target and red below the target. I put an extra column in my query like so...

```auto
IIF(metric > target, '#00FF00','#FF0000') as metric_color

```

Then put _metric\_color_ in the following property...

```auto
../XYChart.props.series[0].column.appearance.deriveFieldsFromData.fill.color

```

which looked a bit like this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5db569b0032de01c5f791b24fe33dfc35dd05046.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 23, 2024, 10:16am UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954/6 "2024-01-23T10:16:05Z")

</div>

> [@Joel\_Farley](#):
>
> `IIF(metric > target, '#00FF00','#FF0000') as metric_color`

Nice - except that you are now hard-coding style into your SQL query! If you change the theme then someone has to dig hard to find it.

It might be better to do  
`IIF(metric > target, 'success', 'fail') as metric_color`  
and then apply a style or theme color from that.

OR

Pass the colors in as parameters and bind them to something in your theme:  
`IIF(metric > target, :success, :fail) as metric_color`

---

<div class="post-metadata">

**Author:** ![Joel\_Farley](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@Joel\_Farley](https://forum.inductiveautomation.com/u/Joel_Farley)\
**Post date:** [January 23, 2024, 11:49pm UTC](https://forum.inductiveautomation.com/t/how-do-i-get-bars-on-a-bar-graph-xy-chart-component-to-be-different-colors/57954/7 "2024-01-23T23:49:06Z")

</div>

> [@Transistor](#):
>
> Nice - except that you are now hard-coding style into your SQL query! If you change the theme then someone has to dig hard to find it.

Good point, hadn't thought about that. I'd just started making this and was figuring out what was possible. I think passing through the parameters is a good idea.
