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

Ignition
1

Hey everyone,

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

barchart

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

2

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 provided by the UK Office for National Statistics which has some good examples.

3

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.

4

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.

5

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

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

Then put metric_color in the following property...

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

which looked a bit like this:
image

1 Like
6

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

7

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.