Creating opacity color scheme based on severity

[vahaldor]

Hello,

I have been playing with color opacity scheme to achieve a graph that is red when the energy consumption was high during the day and green when it was low. According to the grafana documentation, this should be achievable but I am not successful.

My current state: (the whole bar is red when the consumption during the day was high)

The result I want to achieve: (taken from grafana documentation here)

Panel JSON:
{
“id”: 14,
“gridPos”: {
“h”: 8,
“w”: 12,
“x”: 0,
“y”: 0
},
“type”: “barchart”,
“title”: “Panel Title”,
“datasource”: {
“type”: “influxdb”,
“uid”: “P_phlZDVz”
},
“pluginVersion”: “9.2.4”,
“fieldConfig”: {
“defaults”: {
“custom”: {
“lineWidth”: 1,
“fillOpacity”: 71,
“gradientMode”: “opacity”,
“axisPlacement”: “auto”,
“axisLabel”: “”,
“axisColorMode”: “text”,
“scaleDistribution”: {
“type”: “linear”
},
“axisCenteredZero”: false,
“hideFrom”: {
“tooltip”: false,
“viz”: false,
“legend”: false
},
“axisGridShow”: true
},
“color”: {
“mode”: “continuous-GrYlRd”
},
“mappings”: ,
“thresholds”: {
“mode”: “absolute”,
“steps”: [
{
“color”: “green”,
“value”: null
},
{
“color”: “#EAB839”,
“value”: 5
},
{
“color”: “red”,
“value”: 8
}
]
},
“unit”: “kwatth”
},
“overrides”:
},
“options”: {
“orientation”: “vertical”,
“xTickLabelRotation”: 0,
“xTickLabelSpacing”: 100,
“showValue”: “always”,
“stacking”: “none”,
“groupWidth”: 0.7,
“barWidth”: 0.93,
“barRadius”: 0.05,
“tooltip”: {
“mode”: “single”,
“sort”: “none”
},
“legend”: {
“showLegend”: false,
“displayMode”: “list”,
“placement”: “bottom”,
“calcs”:
},
“colorByField”: “Value”,
“xField”: “Time”
},
“targets”: [
{
“datasource”: {
“type”: “influxdb”,
“uid”: “P_phlZDVz”
},
“groupBy”: [
{
“params”: [
“24h”
],
“type”: “time”
},
{
“params”: [
“none”
],
“type”: “fill”
}
],
“measurement”: “kWh”,
“orderByTime”: “ASC”,
“policy”: “default”,
“refId”: “A”,
“resultFormat”: “time_series”,
“select”: [
[
{
“params”: [
“value”
],
“type”: “field”
},
{
“params”: ,
“type”: “max”
}
]
],
“tags”: [
{
“key”: “entity_id”,
“operator”: “=”,
“value”: “energy_all_flat_daily”
}
]
}
]
}

[yosiasz]

So, you wabt this color change only during the day? What happens to bars during the night?

[vahaldor]

Each bar represent consumption on a particular day. Total consumption per day varies. Therefore, I would like to see bar going from green up to red on the day we consumed a lot of energy. Something like thresholds but in gradient.

So no per day / per nigh, don’t look on the x axis of the example I showed. The color scheme is what I like on that example.

[vahaldor]

That’s interesting, I am trying with different data and the thresholds approach. Previsouly, I was able to have horizontal division of the colors: everything bellow 100 was green, everything below 250 was yellow, everything below 400 was orange and above red. Right now, the whole bar has a color according to its value.

There has to be some settings I am missing, which will solve the problem with gradient and thresholds as well but I cannot find it.

[vahaldor]

ok, so this is the solution with time series chart but I cannot achieve it with bar chart.
**

**

[yosiasz]

have you looked into value mapping and then choose range for colors.
what ranges do you want to match with what color? what are the thresholds?

[vahaldor]

Yes I did, that leads to the following difference. Regardless you choose gradient or several threshold steps.

Left image is a gradient on time series chart - works. Right image is the same gradient on bar chart - does not work. Same data.

[jangaraj]

I guess barchart panel is only a beta. It looks like you are beta tester and you found a bug. I would open bug report for that. There is already a few issues Issues · grafana/grafana · GitHub

[yosiasz]

Or maybe bar gauge gradient is the way to go

https://play.grafana.org/d/KIhkVD6Gk/4-gauges?orgId=1&refresh=10s

Sneak Preview of New Visualizations Coming to Grafana | Grafana Labs

[yosiasz]

[vahaldor]

So I opened a bug as you suggested but then, I found out that you can use time series chart with bars instead of lines to achieve exactly the same with working severit gradient:

[vahaldor]

The behavior is not a bug, it is intentional:

BarChart: Fix coloring from thresholds and value mappings

[williamalban]

I am trying to achieve the same result, but even do I chose the color scheme (blue-yellow-red by value), the line stays on a solid color. The interesting thing is that the tooltip shows the right color as I move around the graphic. What I am doing wrong here?

[grant2]

Welcome @williamalban
I think you need to choose a different color scheme. Can you try these settings?

[williamalban]

thanks @grant2
I have tried your suggestion, but I am getting the same result, only affects the tool tip, but not the line.