Bar graph colors depending on evolution

Hello! Just asking, is it possible to change the color of a bar graph depending on the value next to it? I mean. F.E. l have this bar graph:

I want to turn red when the value incrases and green when the value goes down, as it’s “good” to have a lower value. Is this possible? If so, how can I do it?

You can add threshold and specify color for it:

You could add a new calculated field to your query, for example a field called comparison with values of:

  • -1 to indicate it is less than the previous value
  • 0 to indicate it is the same as the previous value
  • 1 to indicate it is more than the previous value

Here’s an example of what the data coming back from your query might look like.

image

You can then use the Color by field property on your comparison field.
image

And then define value mappings for the colors:
image

This will result in a bar chart that looks like this:

3 Likes

Hello @tomglenn thanks for aswering. I’m using an Elasticsearch index so the query must be made in Lucene. Do you know how can I create the calculated field there?
Thanks for your guide! :smiley:

@tomglenn
That is precisely the big question.
How do I compare the values?
The rest is cosmetic. :wink:

I’m not hugely familiar with Lucene unfortunately, but you may want to look into Script Fields.

If your dataset has values for the previous and current in the same row, you could also use Transformations within Grafana to create a new calculated field for the row.

image

Hi @joachimschiewek, how you compare values depends very much on what data source you’re using and what your queries look like. If it’s a SQL data source for example, you might want to write the comparison into the query; or you could opt to use transformations within Grafana as mentioned in my previous reply.

Since this topic is focused on the cosmetic aspect of visually differentiating between bar chart elements based on value, it might be better to create a new topic and provide a bit more information about what you’re trying to achieve and I’ll be happy to assist you further.

As @yosiasz has mentioned, you can make use of Apache ECharts to have a quick and easy solution. I’ve been investigating some of their documentation and this is how I solved it:

Once you have installed the plugin, you can make almost everything you want as you can edit the JS code of the pannel. This applies to the evolution problem here, where @yosiasz has already found the solution.

In addition to his comment, I’ve found interesting to make thersholds with different colors. It looks like this (this is a line graph, you can change it to bars in the right options section):

Add this to your code and customize it as you want:
image

Thanks again @yosiasz for your solution, and hope I helped someone with this!

1 Like