A Modern Energy Dashboard: Power Flow, Energy Flow, ApexCharts, and Gradient Charts
A Modern Energy Dashboard: Power Flow, Energy Flow, ApexCharts, and Gradient Charts
You already have the data: consumption, import, export, PV, self-consumption, dynamic pricing, and a first round of automations. Now we'll turn all of that into a dashboard that doesn't just look good, but actually helps you make a decision every day.
In this lesson you'll build your own energy view in Home Assistant. We'll start with a version that needs no HACS add-ons at all, then move on to the Power Flow Card Plus, Energy Flow Card Plus, and ApexCharts Card. You don't have to install everything at once. The goal is a first dashboard that answers questions, not a gallery of impressive-looking charts.
Plan on about 75 to 90 minutes. HACS cards are community add-ons, so their options can change over time. Treat every example here as a starting point, and once you've installed a card, check its own documentation for the version you're running.
The rule for this lesson
An energy dashboard isn't just there to look impressive.
Every day it should answer: where is the energy coming from, what does it cost, what can be shifted, and are the automations actually paying off?
What a good energy dashboard should show
A good energy dashboard doesn't try to show everything at once. Its job is to give you a fast daily read on the house. When you open the view, within a few seconds you should know: am I producing solar right now, am I pulling from the grid, am I exporting, how much have I used today, is the current price favorable, and did the automations from Lesson 7 actually do anything useful.
Right now: PV power, import, export, current home consumption, battery SOC if you have storage.
Today: production, import, export, self-consumption, self-sufficiency, and cost.
Price: the current dynamic price, the cheapest upcoming hours, a warning when the price is high.
Decision: whether it's worth running the water heater, the dishwasher, the washing machine, the EV charger, or cutting back on draw.
The Energy Dashboard versus your own dashboard
The built-in Energy Dashboard from Lesson 2 is the foundation of your statistics. It's excellent for history, billing periods, import, export, PV, gas, and water. Your own dashboard is a different thing entirely: it's a decision-making view for everyday use. You can lay it out around your own questions, add dynamic pricing, self-consumption, automation toggles, and warnings.
| View | What it's for | Limitation |
|---|---|---|
| Energy Dashboard | History, statistics, official energy sources | Less flexible, doesn't show everything your way |
| Your own dashboard | Daily decisions, dynamic pricing, automations, shortcuts | Requires picking your own entities and cards |
Don't replace the Energy Dashboard
We're not building a custom dashboard so we can throw out the built-in Energy Dashboard. We're building it alongside. The Energy Dashboard is your archive and your statistics; your own dashboard is the decision-making cockpit.
A minimal dashboard with no HACS at all
Before you install any add-ons, build a minimal version using only Home Assistant's built-in cards. This helps you confirm that your entities are correct, and it forces you to decide what you actually want to look at.
Where to paste this YAML
This example is a full dashboard view, not a single card. In the dashboard editor you'll need to edit the view itself, or use the YAML editor for the whole view. If you only want to add one card, use just the type: entities fragments on their own.
A minimal energy view
type: sections
title: Energy
sections:
- type: grid
cards:
- type: entities
title: Right now
entities:
- sensor.pv_power
- sensor.house_power_import
- sensor.house_power_export
- sensor.home_consumption_now
- type: entities
title: Today
entities:
- sensor.pv_production_daily
- sensor.grid_import_daily
- sensor.grid_export_daily
- sensor.self_consumption_daily_no_battery
- sensor.self_sufficiency_percent_today
- type: entities
title: Price and decision
entities:
- sensor.energy_price_now_per_mwh
- binary_sensor.pv_surplus_now
- input_boolean.auto_pv_water_heater
- input_boolean.auto_price_dishwasherSwap in your own entities
The sensor names in these examples are illustrative and carried over from earlier lessons. On your own system, use the exact names from Developer Tools, States. If an entity doesn't exist, the card simply won't show it, or the dashboard will report an error.
Dashboard layout: most important first, details later
The order of your cards matters. The top of the view should answer "what's happening right now?". Charts, history, costs, and device-level detail belong lower down. If the most important decision requires scrolling through five screens, the dashboard is laid out badly.
| Level | What to place there | Why |
|---|---|---|
| Top | Power flow, PV, import, export, current price | A fast decision |
| Middle | Self-consumption, self-sufficiency, automations | Judging how the house is performing |
| Bottom | Charts, costs, water, gas, devices | Analysis and history |
Design for the phone
You'll usually check the energy dashboard in passing: in the kitchen, while doing laundry, before starting the dishwasher, or after a notification arrives. That means the view has to work on a phone. It can look gorgeous on a computer, but if it takes constant scrolling and zooming on a phone, nobody will actually use it.
HACS and energy cards
For a more polished dashboard, we'll use cards from HACS. Power Flow Card Plus shows the power flow right now. Energy Flow Card Plus shows energy over time and echoes the built-in Energy Dashboard, but with more control. ApexCharts Card lets you build your own charts for production, import, export, dynamic pricing, and cost.
| Card | Type | Best used for |
|---|---|---|
| Power Flow Card Plus | custom:power-flow-card-plus |
Live power flow: PV, grid, home, battery |
| Energy Flow Card Plus | custom:energy-flow-card-plus |
Energy over a period: production, import, export, devices |
| ApexCharts Card | custom:apexcharts-card |
History charts, dynamic pricing, comparisons, and trends |
HACS is community add-ons
HACS isn't part of standard Home Assistant. Only install the cards you actually need, check the repository, and read the documentation. After a card update, its YAML options can change.
Mushroom, Button Card, and Auto Entities
Power Flow, Energy Flow, and ApexCharts are this lesson's headline cards, but in practice you'll often round them out with smaller ones. Mushroom works well for tiles and simple state displays. Button Card lets you build more customized buttons. Auto Entities can automatically build lists of entities, for example the devices that used the most energy today.
Mushroom: fast tiles for PV, dynamic price, self-consumption, and automation toggles.
Button Card: custom buttons with colors, icons, and conditions, if you want a more personalized view.
Auto Entities: automatic entity lists, useful once you have a lot of devices and want to filter them by name or attribute.
A simple decision tile, no special effects
type: tile
entity: binary_sensor.pv_surplus_now
name: PV surplus
icon: mdi:solar-powerDon't start with five add-ons at once
Every extra card means more documentation, more options, and more that can change after an update. Build the dashboard on built-in cards first. Then add one card at a time, each one solving a specific problem.
Power Flow Card Plus: power flow right now
Power Flow Card Plus is ideal for the top of the dashboard. It shows where power is flowing at this moment: from PV to the home, from the grid to the home, from the home to the grid, or to the battery. It's the "am I importing or exporting right now?" card.
A Power Flow Card Plus example
type: custom:power-flow-card-plus
title: Power flow right now
entities:
solar:
entity: sensor.pv_power
home:
entity: sensor.home_consumption_now
grid:
entity:
consumption: sensor.house_power_import
production: sensor.house_power_export
battery:
entity: sensor.battery_power
state_of_charge: sensor.battery_soc
w_decimals: 0
kw_decimals: 2The battery is optional
If you don't have battery storage, remove the battery section entirely. Don't leave empty entity fields in place, since the card may throw an error.
Syntax may depend on the card's version
This example shows the idea: which entity maps to which part of the card. If the card throws an error after you paste it, check the current version's documentation in HACS and match the field names.
Energy Flow Card Plus: today's energy
Power Flow shows power right now. Energy Flow Card Plus is better suited to energy over time: how much you produced, how much you imported, how much you exported, and how much specific devices used. It's more "how much came out today?" than "what's happening this second?".
An Energy Flow Card Plus example
type: custom:energy-flow-card-plus
title: Energy today
entities:
grid:
entity:
consumption: sensor.grid_import_daily
production: sensor.grid_export_daily
solar:
entity: sensor.pv_production_daily
home:
entity: sensor.home_consumption_daily
individual1:
entity: sensor.water_heater_energy_daily
name: Water heater
icon: mdi:water-boiler
individual2:
entity: sensor.dishwasher_energy_daily
name: Dishwasher
icon: mdi:dishwasher
energy_date_selection: true
wh_decimals: 0
kwh_decimals: 2Power and energy are still different things
You normally feed Power Flow with power, in W or kW. You feed Energy Flow with energy, in kWh. Mix those values up and the dashboard will look convincing but show nonsense.
Energy Flow Card Plus syntax depends on the version
The syntax above is an example for one particular version of the card (grid.entity.consumption, individual1/individual2). Before pasting it in, compare it against the add-on's current README in HACS. Back up before updating HACS, check the changelog, and keep a Plan B ready: the minimal dashboard built on standard cards, with no custom cards involved.
Cards for self-consumption and self-sufficiency
In Lesson 6 we drew a clear line between self-consumption and self-sufficiency. Both figures deserve a place on the dashboard. Self-consumption tells you how much of your PV production you used on-site. Self-sufficiency tells you how much of the home's total consumption was covered by your own PV.
type: grid
columns: 2
square: false
cards:
- type: tile
entity: sensor.self_consumption_percent_today
name: Self-consumption
icon: mdi:solar-power
- type: tile
entity: sensor.self_sufficiency_percent_today
name: Self-sufficiency
icon: mdi:home-lightning-boltApexCharts: production, import, export, and dynamic pricing
ApexCharts Card gives you the most control over your charts. It's worth using to compare PV production, import, export, and the dynamic price. This isn't just a "nice chart" anymore. It's a tool for checking whether your devices actually switched on when it made sense to.
Two different things
If you want to see how something moves through the day, use power sensors, in W or kW. If you want to see the day's total, use energy sensors in kWh. Don't expect a daily energy counter to look like a chart of instantaneous production.
An instantaneous power chart: PV, import, export
type: custom:apexcharts-card
header:
show: true
title: Power today: PV, import, export
graph_span: 24h
span:
start: day
apex_config:
chart:
height: 280
stroke:
width: 2
fill:
type: gradient
series:
- entity: sensor.pv_power
name: PV
type: line
- entity: sensor.house_power_import
name: Import
type: line
- entity: sensor.house_power_export
name: Export
type: lineA cumulative daily energy chart
type: custom:apexcharts-card
header:
show: true
title: Cumulative energy today
graph_span: 24h
span:
start: day
series:
- entity: sensor.pv_production_daily
name: PV kWh
type: line
- entity: sensor.grid_import_daily
name: Import kWh
type: line
- entity: sensor.grid_export_daily
name: Export kWh
type: lineThis second chart shows totals building up since midnight. It doesn't tell you what the home is drawing this second. It tells you how the day's balance is growing.
A dynamic price chart with a decision threshold
type: custom:apexcharts-card
header:
show: true
title: Dynamic price today
graph_span: 24h
span:
start: day
apex_config:
annotations:
yaxis:
- y: 60
label:
text: Threshold $60/MWh
series:
- entity: sensor.energy_price_now_per_mwh
name: Price
type: lineA threshold isn't a measurementinput_number.cheap_price_threshold_per_mwh is a value you set by hand. On the chart it's just a reference line. Don't treat it like a price sensor or a record of the market.
Syntax may depend on the card's version
ApexCharts Card has a lot of options and has gone through several versions. If the example doesn't work right away, check the documentation in HACS and match the fields to your installed version.
A price and cheapest-hours view
If your pricing integration exposes sensors like "cheapest hour," "next cheap window," or tomorrow's prices, show them in a section of their own. Don't mix them in with PV production, since that's a different kind of decision.
type: entities
title: Energy price
entities:
- sensor.energy_price_now_per_mwh
- sensor.energy_price_tomorrow_per_mwh
- sensor.cheapest_hour_today
- sensor.cheapest_hour_tomorrow
- input_number.cheap_price_threshold_per_mwh
- binary_sensor.price_is_cheap_nowThe price entity names below are examples
Entities like sensor.energy_price_tomorrow_per_mwh or sensor.cheapest_hour_today don't need to exist in any specific integration. Swap them for the real entities from your own installation and your pricing integration's HACS documentation.
A view for automation effects
The energy dashboard should show not just inputs, but outcomes. If you built a water heater or dishwasher automation in Lesson 7, show its lockout toggle, the device's status, and how much energy it's used today. That way you can tell whether the automation is actually working, and whether it's causing friction for the household.
type: entities
title: Energy automations
entities:
- input_boolean.auto_pv_water_heater
- switch.water_heater
- sensor.water_heater_energy_daily
- input_boolean.auto_price_dishwasher
- switch.dishwasher
- sensor.dishwasher_energy_dailyWater, gas, and costs on the same view
This module covers energy broadly: electricity, water, gas, solar, and cost. If you already have water or gas entities from the Energy Dashboard, you can add them to the same dashboard, but don't mix them in with the PV power flow. It works better as a separate "Utilities and costs" section.
type: entities
title: Utilities and costs today
entities:
- sensor.electricity_cost_today
- sensor.grid_import_daily
- sensor.water_usage_today
- sensor.gas_usage_today
- sensor.water_heater_energy_daily
- sensor.dishwasher_energy_dailyShow costs carefully. In Lesson 3 we calculated a simple cost based on a single flat rate, but your actual bill may include fixed charges, delivery fees, taxes, and tiered or seasonal rates. The dashboard should show direction and scale, not stand in for your utility's own billing.
Units must be visible
With water and gas it's easy to lose track of scale. Gallons or liters, cubic feet or cubic meters, kWh, dollars, and $/MWh are all very different things. If a card doesn't show its units clearly, add them to the name yourself, or pick a different card.
How to read the dashboard through the day
The energy dashboard delivers the most value when you check it at specific moments. In the morning you check the plan: what production is forecast, whether there are cheap price hours coming up, and whether anything can be shifted. At midday you look at PV, export, and surplus. In the evening you check what you actually used, and whether the automations behaved sensibly.
| Time of day | What you look at | Possible decision |
|---|---|---|
| Morning | Price, forecast, automations, plan for the day | Delay the dishwasher or laundry? |
| Midday | PV, export, surplus, water heater, EV | Use the surplus on-site? |
| Evening | Cost, import, devices, self-consumption | Did the automation actually pay off? |
Build order: not everything at once
The most common dashboard mistake is trying to build the perfect version right away. It's better to work in three passes. The first version has only the basic entities and runs with no HACS at all. The second adds power flow and a single chart. Only the third pass tidies up appearance, colors, extra cards, and detailed sections.
Version 1: "Right now" and "Today" entities, no HACS, no decoration. The goal is correct data.
Version 2: one flow card and one chart. The goal is grasping the situation quickly.
Version 3: colors, tiles, automations, water, gas, costs, and devices. The goal is comfortable everyday use.
A dashboard is a tool, not a graphic design project
If you haven't looked at a card in a week, it probably doesn't belong on the main view. Move it lower, put it on a separate tab, or delete it. The best dashboard is the one you actually use.
Daily, weekly, and monthly views
A single dashboard can hold several sections. The daily section answers "what's happening right now?". The weekly section shows recurring patterns. The monthly section helps you check whether the savings are actually real.
| Scope | What it shows | Decision |
|---|---|---|
| Today | PV, import, export, dynamic price, automations | Should I run something right now? |
| Week | Recurring import, export, and standby hours | What can be shifted? |
| Month | Cost, production, self-consumption, devices | Did the automations actually pay off? |
Performance: less means faster
Advanced charts are convenient, but they can slow the view down, especially on a phone. Don't put ten ApexCharts charts on a single screen. It's better to keep one daily chart on the main view and push detailed analysis further down, or onto a separate tab.
What to check when a card doesn't work
Is the card installed: check in HACS that the add-on has been downloaded, and that Home Assistant was refreshed after installation.
Is the card type correct: a typo in custom:power-flow-card-plus or custom:apexcharts-card is enough to stop the card from loading.
Do the entities exist: check the names in Developer Tools, States.
Do the units match: Power Flow needs power, Energy Flow needs energy.
Common mistakes
Too many cards: the dashboard turns into a wall of charts, and you no longer know what to look at.
Missing units: you can't tell whether you're looking at W, kWh, $/MWh, or $/kWh.
Power gets mixed up with energy: the chart looks fine, but it's comparing two different quantities.
No pricing context: the price is on the chart, but there's no threshold, no decision, and no visible unit.
Charts with no decision attached: lots of color, but you still don't know whether to do anything.
Desktop-only dashboard: unusable on a phone, even though that's where you check it most often.
Installing HACS before the minimal view: check your entities first, then make it pretty.
A heavy dashboard on the phone: too many HACS cards and charts slow the view down, so the household stops opening it.
Pasting YAML in the wrong place: code for an entire view won't work as a single card.
Outdated card syntax: an example from the internet may cover an older version of the add-on.
Assignment: build your first energy dashboard
To do
☐ Create an "Energy" view and start with the minimal dashboard, no HACS.
☐ Add a "Right now" section: PV, import, export, home consumption.
☐ Add a "Today" section: production, import, export, self-consumption, and self-sufficiency.
☐ Add the dynamic price and a decision threshold, if you have a pricing integration.
☐ Add the automation lockout toggles from Lesson 7.
☐ Only then install one HACS card: Power Flow Card Plus or ApexCharts.
☐ Open the dashboard on your phone and remove anything you can't understand at a glance.
☐ Check that you're pasting each YAML example in the right place: a view or a single card.
☐ On the daily chart, keep instantaneous power separate from cumulative energy.
☐ Remove or move down any card that slows your phone down.
☐ Write down one decision the dashboard helped you make.
Key takeaways
The Energy Dashboard stays your foundation: your own dashboard is the everyday cockpit.
Start with no HACS: check your entities and questions first, then install add-ons.
Power Flow shows power right now: where energy is flowing at this moment.
Energy Flow shows energy: how much came out over a given period.
ApexCharts shows trends: PV, import, export, dynamic price, and the effect of your automations.
A dashboard should lead to a decision: if a chart isn't helping, remove it or move it down.
What's next
In Lesson 9 we'll look at water and gas in practice: meters, entities, common pitfalls, and how to fold them into the same overall picture as electricity and solar.
If, after this lesson, you have a dashboard that tells you within a few seconds whether you're importing, exporting, producing, and what you can shift, then it's doing its job. It doesn't need twenty cards. It needs to help.
