I made a custom Lovelace card that shows supply vs demand as proportional horizontal bars. I built it because the Energy Distribution Card didn’t give me the instant “how are things balanced right now?” feeling I wanted.
What it does
You define sources (production) and destinations (consumption). The card shows them as proportional bars. When sources produce more, a surplus bar appears. When destinations need more, a shortfall bar fills the gap. Everything scales proportionally so you see the balance at a glance.
Examples
Current power flow — surplus:
Current power flow — shortfall:
Daily totals:
Compact mode (6 columns, 1 row) — two cards side by side:
Taller layout with entity names:
Why not the Distribution Card?
The Distribution Card is great, but it takes more space and cognitive effort to parse. The Flow Bars Card shows the same information in a single horizontal strip.
Features
- Proportional bars — widths reflect actual values
- Automatic surplus/shortfall — calculated from the difference between sources and destinations
- 9 visual themes — hatched (default), animated stripes, classic, gradient, tapered, dotted, dashed, shadow, double-line
- Responsive — works great in small spaces (half-width, 1 row); shows entity names when given more height
- Full visual editor — entity picker with deduplication, flip sources/destinations button, per-entity customization (name, icon,
color, opacity) - Not just energy — works with any numeric entity: water, gas, or anything else you want to compare
- HA Energy Dashboard colors by default — fits right in
Installation
Available via HACS (custom repository for now):
- HACS → Frontend → ⋮ → Custom repositories
- Add
c-kick/hnl-flow-bars-cardas Dashboard - Install and restart
Or grab the JS from the latest release.
Links
Full config reference in the README
Feedback, ideas, and bug reports welcome!