Grafana Bidirectional Gauges

2026-01-20 | Updated: 2026-01-24

Does the Monopoly man have a monocle? You look it up and find out that he does not, even though you strongly remember him that way. Did they change it at some point? Do you have memories of a parallel universe? Why do so many people ask this exact question? In pop culture this is known as the "Mandela Effect", and I had the same feeling when I was trying to figure out how to get a gauge in Grafana that shows two different values at once, with a zero point in the middle. I wanted to display disk IO for both read and write, but it would also be great for network traffic and other bidirectional metrics. I was sure that I had seen such a thing in Grafana before, but I had to learn that it never existed. Maybe I saw it in some other tool.

"Well", I thought, "then I will just use that horizontal line or bar graph that shows data on both sides with the zero point in the middle." Same thing. It never existed. So when did I slip into this parallel universe where Grafana suddenly does not have my beloved visualizations anymore? I decided that I would get my visualizations back no matter what, so I pulled an all-nighter and hacked some stuff together. To my surprise, it actually worked and I am quite happy with the result.

One early decision I made was that I did not want to maintain my own Grafana plugin. I just wanted something that works without too much modification, so I started looking into what kind of client-side changes I could use to achieve this. I already knew that when you have multiple time series in a gauge visualization, you get two gauges side by side. Not exactly what I wanted, but it was a good starting point. I also set it up so both gauges had their zero value in the middle. Then I imagined myself taking my big cake knife, the one that I normally only use to cut up pie charts, and slicing both diagrams in half vertically. If I could somehow squish them together afterward, I would get what I wanted. Sure, the text would be messed up, but that seemed fixable.

I fooled around with CSS until this:

looked like this:

This is the CSS that I came up with: lhns/grafana-bidirectional-gauges.css

Okay, now I have my CSS. How do I get that into my Grafana dashboard, you might ask? Well, there is an "interesting" option in Grafana to disable HTML sanitization in text panels. That is scary in big multi-user instances, but pretty cool for small setups because it allows you to inject arbitrary CSS and JavaScript into your dashboard pages to customize them. So I just created a text visualization, switched it to HTML mode, and put my CSS wrapped in a <script></script> tag in there. Then I resized the text visualization to look as innocuous as possible:

When it loads, the css gets injected and the bidirectional gagues look the way they should.

And there we go, it actually works the way I wanted it to. It is surprisingly flexible, too. It is definitely a hack, but a fun and useful one, and it gets the job done without writing or maintaining a custom plugin. And it is astonishing how native it feels when you use it.

This silly project has, once again, already taught me more about CSS, and especially transforms, than it had any right to.