A custom Home Assistant Lovelace card that visualizes supply vs demand flows as proportional horizontal bars with accolade connectors.
Production sources (e.g. solar, battery) are shown on top with slanted labels and bracket connectors. Consumption destinations (e.g. house, EV charger) are shown below. Bar widths scale proportionally, with optional remainder bars showing grid import/export.
The main purpose of this card is to show source(s), destination(s), surplus and shortfall - all in one.
So if you need to see:
- How much units are generated?
- How much units are consumed?
- Does anything remain? Or do we fall short?
units can be solar, water, gas, kilograms, liters, apples, oranges - whatever you want!
Then is the card for you.
The card compares sources (production) against destinations (consumption) as proportional bars. Two possible scenarios:
- A. When sources produce more than destinations consume, the leftover appears as a surplus bar.
- B. When destinations need more than sources provide, the gap appears as a shortfall bar.
Both bars scale proportionally so you can see the balance at a glance.
- Show how much solar power is generated
- How much of it is consumed
- If something remains: how much flows back to the grid?
- If we fall short: how much is drawn from the grid?
1a: 805W surplus
1b: 822W Shortfall
- Show how much solar power was generated today
- How much of it was consumed
- How much was returned to the grid
- How much was drawn additionally from the grid
2a: 7kWh shortfall
2b: 7kWh surplus
The card performs very well in small spaces (as this was the initial intended purpose when I started work on it). Here's both current power distribution and daily use in two small cards, 6 columns 1 row each:
Or, spread over 2 rows, with Show names enabled:
As long as the entities you use have a numeric (int/float/decimal) value, you can use them - even if it makes no sense at all.
You can add as many sources and destinations as you like, but keep in mind that it can become unreadable. The card is designed for 1-3 sources and 1-3 destinations. Any more and legibility will suffer.
We do, but that card only shows composition, not the flow from production to consumption (and its limited to energy entities only). See the difference for yourself:
Or, if you prefer to do this manually:
- Open HACS → three-dot menu → Custom repositories
- Add
c-kick/hnl-flow-bars-cardwith category Dashboard
- Search HACS for "HNL Flow Bars Card" and install it
- Restart Home Assistant
- Add a card and search for "HNL Flow Bars Card"
- Use the visual editor to set it up
- Download
hnl-flow-bars-card.jsfrom the latest release - Copy it to
/config/www/hnl-flow-bars-card.js - Add the resource in Settings → Dashboards → Resources:
- URL:
/local/hnl-flow-bars-card.js - Type: JavaScript Module
- URL:
The card is equipped with a visual editor, with which you can adjust all settings.
| Option | Type | Default | Description |
|---|---|---|---|
production |
list | required | Production source entities |
consumption |
list | required | Consumption destination entities |
unit_of_measurement |
string | from entity | Override unit for all bars |
global_color |
string | auto-generated | Default bar color for all entities (CSS color, overridden per entity) |
global_text_color |
string | inherit |
Default text color for all entities (overridden per entity) |
global_bg_opacity |
string | inherit |
Default background opacity for all entities and remainders (0–1, overridden per entity) |
rounding |
number | 0 |
Decimal places for displayed values |
hide_zero_values |
bool | true |
Hide bars with zero values |
transparent |
bool | true |
Remove card background |
slanted_edge |
bool | true |
Slant the right edge of source labels |
show_names |
bool | true |
Show entity names when the card is tall enough |
layout |
string | accolade |
Layout structure: accolade or native (see Layouts & Themes) |
theme |
string | layout default | Visual theme within the chosen layout (see Layouts & Themes) |
gradient |
bool | false |
Apply gradient shading to bars |
hatched |
bool | false |
Apply diagonal stripe pattern to remainder bars (shortfall/surplus) |
animated |
bool | false |
Animate background patterns (e.g. hatched stripes) |
borders |
bool | layout default | Show bar outlines (default: on for native, off for accolade) |
energy_date_selection |
bool | false |
Sync with HA Energy Dashboard date picker (see Energy Dashboard integration) |
grid_options |
object | {} |
Override HA grid sizing (e.g. { columns: 6, rows: 2 }) |
production_remainder |
object | Config for production remainder bar | |
consumption_remainder |
object | Config for consumption remainder bar |
| Option | Type | Default | Description |
|---|---|---|---|
entity |
string | required | Entity ID |
name |
string | friendly_name |
Custom display name (shown when card is tall enough) |
icon |
string | auto-detected | MDI icon override (defaults: mdi:solar-power-variant for sources, mdi:power-plug for destinations) |
color |
string | auto-generated | CSS color (#hex, rgb(), var(--name)) |
bg_opacity |
string | inherit |
Background opacity (0–1) |
text_color |
string | inherit |
Text color override |
unit_of_measurement |
string | from entity | Unit override |
| Option | Type | Default | Description |
|---|---|---|---|
name |
string | Shortfall / Surplus |
Label |
icon |
string | mdi:eye |
MDI icon |
color |
string | theme variable | CSS color |
bg_opacity |
string | inherit |
Background opacity |
text_color |
string | theme variable | Text color |
unit_of_measurement |
string | from first entity | Unit override (defaults to first source entity for shortfall, first destination for surplus) |
type: custom:hnl-flow-bars-card
unit_of_measurement: W
rounding: 0
hide_zero_values: true
energy_date_selection: false
transparent: true
slanted_edge: true
show_names: true
layout: accolade
theme: classic
gradient: false
hatched: true
animated: false
production:
- entity: sensor.solar_power
icon: mdi:solar-power-variant
- entity: sensor.battery_discharge
icon: mdi:battery-arrow-down
name: Battery
color: "#4caf50"
consumption:
- entity: sensor.house_power
icon: mdi:home
name: House
- entity: sensor.ev_charger_power
icon: mdi:car-electric
color: "#2196f3"
production_remainder:
name: Grid import
icon: mdi:transmission-tower-import
consumption_remainder:
name: Grid export
icon: mdi:transmission-tower-exportWhen energy_date_selection is enabled and the card is placed on a view that contains an energy-date-selection card, bar values automatically reflect the selected date range (today, this week, this month, etc.) using recorder statistics instead of live sensor states. This lets you use the card as a companion to the built-in Energy Dashboard.
Requirements:
- Add a
type: energy-date-selectioncard to the same view (this is the date picker from the Energy Dashboard) - Your entities must have recorder statistics available (energy sensors typically do)
type: custom:hnl-flow-bars-card
energy_date_selection: true
unit_of_measurement: kWh
production:
- entity: sensor.solar_energy_today
consumption:
- entity: sensor.house_energy_todayThe card adapts to its available height:
- Compact (1 row): Only icon + value shown in source labels and destinations.
- Taller layouts (2+ rows): Entity names automatically appear below the value in both source labels and destination bars when there is enough vertical space. Bars always stretch to fill the available card height. The threshold is content-relative (based on
emunits, not fixed pixels), so it scales with font size. show_names: false: Disables entity names entirely, regardless of available space.
The card shows inline warnings when:
- An entity is not found in Home Assistant
- An entity state is
unavailableorunknown - An entity has a non-numeric state
The visual editor includes:
- Entity management: Add, remove, and reorder entities with up/down buttons per list.
- Flip button: Swap all sources and destinations in one click.
- Entity deduplication: Already-used entities are excluded from the picker to prevent duplicates.
- Per-entity customization: Name, icon, color, text color, background opacity, and unit override per entity.
- Remainder editors: Customize shortfall and surplus appearance with a visual diagram explaining the concept.
The card uses the following default colors:
| Bar type | Default color | Notes |
|---|---|---|
| Sources | #ffd407 (yellow) |
Production/supply entities |
| Destinations | #8b58bf (purple) |
Consumption/demand entities |
| Shortfall | #ce513a (red) |
Demand that sources couldn't cover |
| Surplus | #3c9940 (green) |
Supply that destinations didn't use |
Enable the hatched toggle to give remainder bars a diagonal stripe pattern, visually distinguishing them from regular bars.
These defaults are defined in src/const.js and can be overridden per entity/remainder in the card config. The card also exposes CSS custom properties for theme-level overrides:
:host {
/* Base source/destination colors */
--hnl-flow-bars-color-production: #ffd407;
--hnl-flow-bars-color-consumption: #8b58bf;
/* Auto-generated palette variants (0–4 per side, shifted in hue/lightness) */
--hnl-flow-bars-color-production-0: /* base */;
--hnl-flow-bars-color-production-1: /* darker, hue-shifted */;
--hnl-flow-bars-color-production-2: /* lighter, hue-shifted */;
--hnl-flow-bars-color-production-3: /* darker, wider hue shift */;
--hnl-flow-bars-color-production-4: /* lighter, wider hue shift */;
/* Same pattern for consumption-0 through consumption-4 */
/* Remainder colors */
--hnl-flow-bars-color-shortfall: #ce513a;
--hnl-flow-bars-color-surplus: #3c9940;
}The card defaults to 12 columns × 1 row in HA section views (min_columns: 3, min_rows: 1). Override with grid_options in the card config, or resize via the HA UI.
- Layouts determine how the elements are structured:
accolade(bracket connectors) ornative(stacked bar rows). - Themes determine the visual shape of bars within the chosen layout.
- Accolade:
classic(default) - Native:
default(pill-shaped),split-pill,minimal,contained
- Accolade:
- Toggles are independent switches that combine with any layout and theme:
gradient— gradient shading on barshatched— diagonal stripe pattern on remainder bars (shortfall/surplus)animated— animates background patterns (e.g. scrolling hatched stripes)
Below is an overview of the available themes (screenshots taken using the default HA theme in dark-mode)
note: this is from v1.4.0 and might not be up to date
git clone https://github.com/c-kick/hnl-flow-bars-card.git
cd hnl-flow-bars-card
npm install
npm start # watch mode with dev server on :5000
npm run build # production buildMIT