Energy Flow & Price Card – live power flow + hourly/quarter-hour price, built for a wall tablet
I had been looking for a card that shows both the hourly/quarter-hourly electricity tariff in a visual chart and the live power flow of my home, including battery, solar and car. You may recognise this kind of layout, but I developed it specifically around the height limitation of a tablet mounted on the wall. By laying the live flow out more horizontally, I created room underneath it for the hourly/quarter-hourly price chart.
Maybe I built this mostly for myself, but I wanted to share it anyway for anyone who runs into the same problem.
Energy Flow & Price Card
A compact Home Assistant Lovelace card that combines two things in one block: a live energy flow diagram and a dynamic electricity price chart. It is designed to be compact enough for a wall-mounted tablet, with the flow laid out horizontally and the price chart below it.
Features
- Energy flow: the home in the centre, with solar, battery (including a SoC ring), grid and EV charger(s) in the corners, and animated lines that only move when power is actually flowing.
- Always-visible nodes: solar, battery, grid and car are always shown. If an entity is not configured, the node stays grey with a static line, so the card never looks empty; it colours in and animates once power flows.
- Three chart tabs: a bar chart of your dynamic electricity price, today’s solar production, and today’s battery SoC.
- Price chart with a “Now” marker and a customizable low/medium/high colour scale that blends smoothly between the points you set.
- Home usage is calculated automatically (
solar + grid + battery_discharge - battery_charge); no separate entity needed. - Works with many providers as long as the price is in EUR/kWh: Frank Energie, Tibber, Nord Pool, ENTSO-e, Zonneplan and others. Providers that report a scaled value (such as Zonneplan) are converted automatically.
- Multiple cars, each with its own name; choose auto-scroll (cycles automatically) or a static view.
- Adjustable price window from 8 to 48 hours, starting at midnight or at the current hour.
- Multilingual: the texts follow the Home Assistant language (
hass.language). Dutch, English and German are supported; other languages fall back to English. - Full visual editor: pick your entities, toggle flow/charts, add cars, set the price window, and adjust all colours and price thresholds.
Installation via HACS
- HACS, three dots, Custom repositories.
- Add the repo URL, category Dashboard.
- Download and reload your browser.
The resource is served via /hacsfiles/energy-flow-price-card/energy-flow-price-card.js.
Example configuration
type: custom:energy-flow-price-card
show_flow: true
show_price: true
price_hours: 24 # 8 to 48
price_start: midnight # "midnight" or "now"
language: auto # auto | nl | en | de
solar_power: sensor.solar_power
grid_power: sensor.p1_power # +/- : positive = import, negative = export
battery_charge_power: sensor.battery_charge # W, positive
battery_discharge_power: sensor.battery_discharge # W, positive
battery_soc: sensor.battery_soc
price_entity: sensor.electricity_price # any provider in EUR/kWh
cars:
- name: My car
power: sensor.wallbox_power
soc: sensor.car_soc
Feedback and ideas are very welcome in the repository: GitHub - dennisbest85/energy-flow-price-card: Compacte Home Assistant Lovelace-card: energie-flow (solar, accu, huis, net, auto) plus dynamische stroomprijzen per uur/kwartier. Volledig instelbaar via de GUI. · GitHub
This card was built with the help of Claude.