Gauge that can go negative

Configuration Frontend
1

Does anyone have a custom gauge or other ideas for a gauge that can go negative? Ideally, zero would be in the center and the coloured bar would go left from the center for negative and right from the center for positive.

I’d like to display my current net energy usage, which may be negative due to my solar power system.

The standard gauge card allows the minimum to be set below zero, but it doesn’t seem to work, and the bar always starts from the far left anyway.

1 Like
2

Not a gauge as such, but have you seen this?

EDIT: Canvas Gauges: GitHub - Mikhus/canvas-gauges: HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

Examples: Examples

3

Thanks, not exactly what I was looking for but pretty sweet all the same!

4

Did you ever solve this?

5

I’ve just found this post as I’m asking the same question. In the end, I’ve used the conditional card to show one or another gauge, and a template value that turns the negative into a positive for proper display.

6

I ended up using the Power Wheel card linked above instead.

1 Like
7

How did you do that? Do you mind posting your approach?

Cheers

8

I am using it to display the power flow between my solar inverter, house and the grid, which is exactly what the power wheel card is designed for. Check out the documentation in the linked thread, it’s a bit complicated to set up but looks good once working.

If you want a guage that can go negative for a different application then the power wheel card won’t help and I didn’t find any other solution sorry.

1 Like