Energy Flow Card Plus

Configuration

Every option, what it does, and how to use it. Required fields are marked with *. The colored section headers group options by which entity they apply to.

In a hurry?

The Examples page has minimal configs you can paste straight into your dashboard. Come back here when you want to fine-tune.

Card options

Title, decimals, flow rate

Grid

Bidirectional or split entity

Solar

Production sensor

Battery

Charge/discharge + SoC

Home

Home consumption circle

Low-carbon

Fossil fuel percentage

Card options

Top-level options that affect the whole card — title, dashboard links, decimals, flow speed, and behavior toggles.

example.yaml

type: custom:energy-flow-card-plus
title: My energy
kilo_threshold: 1000
kilo_decimals: 2
clickable_entities: true
entities:
  # ...

type*stringdefault -required

custom:energy-flow-card-plus

entities*objectrequired

At least one of grid, battery or solar is required. See the entity sections below.

titlestring

Shows a title at the top of the card.

Actions

Per-circle click handlers. Use these to open more-info, navigate, call services, or fire scripts.

Requires clickable_entities: true.

Each clickable circle supports the standard Home Assistant action objects. If you don't configure these and have clickable_entities: true, the card falls back to opening more-info.

example.yaml

entities:
  grid:
    entity: sensor.grid_energy
    tap_action:
      action: navigate
      navigation_path: /lovelace/energy
    hold_action:
      action: more-info

tap_actionobject

Triggered on tap/click.

hold_actionobject

Triggered on long press.

double_tap_actionobject

Triggered on double tap.

Entities

The heart of the configuration. At least one of grid, battery or solar is required. All values use Wh/kWh as unit_of_measurement (except state_of_charge, which is a percentage).

Each child below has its own dedicated section with all options. Pick the ones you need and skip the rest.

gridobject

See Grid below.

solarobject

See Solar below.

batteryobject

See Battery below.

individualarray

Up to 4 individual device objects.

homeobject

See Home below.

fossil_fuel_percentageobject

Optional low-carbon / fossil-fuel circle.

Grid

The connection to the public power grid. Supports either a single bidirectional sensor or split production/consumption sensors.

example.yaml

entities:
  grid:
    entity:
      consumption: sensor.grid_consumption
      production: sensor.grid_production
    name: Provider
    display_state: one_way
    color_circle: color_dynamically
    power_outage:
      entity: binary_sensor.grid_status

entity*stringobjectrequired

Single bidirectional sensor (negative = production, positive = consumption) or a split entities object.

namestringdefault Grid

Override the auto-translated label.

iconstringdefault mdi:transmission-tower

Icon shown inside the circle.

colorobject

Production / consumption colors.

color_iconstringdefault no_color

color_dynamically | no_color | production | consumption

display_statestringdefault two_way

two_way | one_way | one_way_no_zero

color_circlestringdefault consumption

color_dynamically | production | consumption

secondary_infoobject

See Secondary Info section.

display_zero_tolerancenumberdefault 0

States below this number are treated as zero (avoids battery-correction artifacts).

power_outageobject

Configure power-outage behavior. See Power Outage section.

color_valuebooleandefault true

Color the value text.

invert_statebooleandefault false

Invert sign convention (positive = production).

Solar

Solar production. A single sensor giving the current solar output is enough.

example.yaml

entities:
  solar:
    entity: sensor.solar_energy
    name: PV
    icon: mdi:solar-panel-large
    color_icon: true
    display_zero: true

entity*stringrequired

Sensor providing solar production.

namestringdefault Solar

Override the label.

iconstringdefault mdi:solar-power

Solar circle icon.

colorstring

HEX color for solar circle, label and lines.

color_iconbooleandefault false

Match icon to circle color.

color_valuebooleandefault false

Match value text to circle color.

secondary_infoobject

Secondary info displayed inside the circle.

display_zerobooleandefault true

Show solar even when the entity is 0 / unavailable.

display_zero_statebooleandefault true

Show value when 0.

invert_statebooleandefault false

Invert sign convention.

Battery

example.yaml

entities:
  battery:
    entity:
      consumption: sensor.battery_consumption
      production: sensor.battery_production
    state_of_charge: sensor.battery_soc
    state_of_charge_decimals: 0
    display_state: one_way
    color_circle: color_dynamically

entity*stringobjectrequired

Single bidirectional sensor or split entities object.

state_of_chargestring

Sensor providing the SoC in percent (100 = full).

state_of_charge_unitstringdefault %

Unit shown next to the SoC.

state_of_charge_unit_white_spacebooleandefault true

Whitespace between SoC value and unit.

state_of_charge_decimalsnumberdefault 0

Decimals for the SoC.

namestringdefault Battery

Override the label.

iconstringdefault dynamic

Defaults to a dynamic battery icon based on SoC.

colorobject

Production / consumption colors.

color_iconstringdefault no_color

color_dynamically | no_color | production | consumption

display_statestringdefault two_way

two_way | one_way | one_way_no_zero

color_state_of_charge_valuestringdefault no_color

color_dynamically | no_color | production | consumption

color_circlestringdefault consumption

color_dynamically | production | consumption

color_valuebooleandefault true

Color the value text.

invert_statebooleandefault false

Invert sign convention.

Individual devices

As many as you want, up to four individual devices are shown.
EVs, heat pumps, ovens, anything you'd like to call out.

individual is an array of device objects. Each appears as an extra circle on the card. The structure below documents the fields each item accepts.

example.yaml

entities:
  individual:
    - entity: sensor.car_energy
      name: EV
      icon: mdi:car-electric
      color: "#80b8ff"
      color_icon: true
    - entity: sensor.heatpump_energy
      name: Heat pump
      icon: mdi:heat-pump
      display_zero: true

entity*stringrequired

Sensor for the individual device.

namestring

Label shown above the circle.

iconstring

Icon path (e.g. mdi:car-electric).

colorstring

HEX color for circle, label and line.

color_iconbooleandefault false

Match icon to circle color.

unit_of_measurementstring

Override the displayed unit.

inverted_animationbooleandefault false

Reverse the dot direction.

secondary_infoobject

Secondary info object.

display_zerobooleandefault false

Show device when state is 0.

display_zero_tolerancenumberdefault 0

Treat states below this number as zero.

display_zero_statebooleandefault true

Show value when 0.

color_valuebooleandefault false

Match value text to circle color.

decimalsnumberdefault 0

Decimals shown in the value.

Home

The receiving circle. Its value is computed from the other sources by default — you only need an entity for the more-info dialog.

example.yaml

entities:
  home:
    entity: sensor.home_consumption
    name: Casa
    color_icon: solar
    subtract_individual: true

entity*stringrequired

Sensor for home consumption. Used only for the more-info dialog, the value is calculated from the other sources.

namestringdefault Home

Override the label.

iconstringdefault mdi:home

Home circle icon.

color_iconboolean'solar''grid''battery'default false

Match icon to the highest source or a specific source.

color_valueboolean'solar''grid''battery'default false

Match value text to the highest source or a specific source.

secondary_infoobject

Optional secondary info.

subtract_individualbooleandefault false

Subtract individual devices from the home consumption value.

override_statebooleandefault false

Use the entity state directly instead of recomputing from sources.

Fossil fuel / low-carbon

Show the percentage of low-carbon energy on the grid (e.g. from the CO2 Signal integration).

example.yaml

entities:
  fossil_fuel_percentage:
    entity: sensor.fossil_fuel_percentage
    state_type: power
    display_zero: true
    color_icon: true
    name: Non-fossil

entity*stringrequired

Sensor giving the fossil-fuel percentage (CO2 Signal works out of the box).

namestringdefault Low-carbon

Label above the circle.

iconstringdefault mdi:leaf

Icon inside the circle.

colorstringdefault #0f9d58

Stroke color of circle and line.

color_iconbooleandefault false

Color the icon with the circle color.

display_zerobooleandefault true

Show even when the state is 0 / unavailable.

display_zero_statebooleandefault true

Show value when 0.

state_typestringdefault power

power | percentage; what type of value the entity provides.

unit_white_spacebooleandefault true

Whitespace before the unit.

calculate_flow_ratebooleannumberdefault false

Use the flow formula or a fixed dot interval (seconds).

Shared objects

Color object

Used by Grid and Battery to specify a separate color for production and consumption.

example.yaml

entities:
  grid:
    entity: sensor.grid_energy
    color:
      consumption: "#488fc2"
      production: "#8353d1"

productionstring

HEX color for production.

consumptionstring

HEX color for consumption.

Split entities

Use this on Grid or Battery when production and consumption come from separate sensors. Both must share a compatible unit_of_measurement.

example.yaml

entities:
  grid:
    entity:
      consumption: sensor.grid_consumption
      production: sensor.grid_production

consumptionstring

Sensor for consumption.

productionstring

Sensor for production.

Secondary info

Adds a small extra value next to a circle. Great for an EV's SoC, a daily total, or a templated string.

example.yaml

entities:
  individual:
    - entity: sensor.car_energy
      secondary_info:
        entity: sensor.car_soc
        unit_of_measurement: "%"
        decimals: 0
        icon: mdi:battery

entity*stringrequired

Sensor whose state is shown.

unit_of_measurementstring

String unit (quote it in YAML, e.g. '%').

iconstring

Optional small icon next to the value.

unit_white_spacebooleandefault true

Whitespace before the unit.

display_zerobooleandefault false

Show even when 0 / unavailable.

display_zero_tolerancenumber

Treat states below this number as zero.

decimalsnumber

Decimals for the displayed value.

templatestring

HA template, evaluated reactively. Use only if entity is unset.

accept_negativebooleandefault false

Show negative values as-is instead of taking the absolute value.

sum_totalboolean

On the solar bubble, sum the secondary info with the main entity.

tap_actionobject

Action triggered on tap.

hold_actionobject

Action triggered on long press.

double_tap_actionobject

Action triggered on double tap.

Power outage

Detect a grid outage and react: switch the icon, show a label, override the flow rate, optionally include a generator entity.

example.yaml

entities:
  grid:
    entity: sensor.grid_energy
    power_outage:
      entity: binary_sensor.grid_status
      state_alert: "off"
      icon_alert: mdi:flash-off
      label_alert: Outage

entity*stringrequired

Entity whose state changes during a power outage.

entity_generatorstring

Optional generator power entity.

state_alertstringdefault on

State value that signals an outage.

icon_alertstringdefault mdi:transmission-tower-off

Icon shown during the outage.

label_alertstring

Text shown below the icon during the outage.

calculate_flow_ratebooleannumberdefault false

Use the formula or a fixed dot interval (seconds).

Display zero lines

What to do with lines whose value is 0 — keep them visible, hide them, or fade them out.

example.yaml

display_zero_lines:
  mode: transparency
  transparency: 60

modestringdefault show

show | hide | transparency | grey_out | custom

transparencynumberdefault 50

0–100, used by transparency / custom modes.

grey_colorstringnumber[]

HEX or RGB array, used by grey_out / custom modes.

Energy collection key

Bind the card to a specific Home Assistant energy dashboard's collection.

Home Assistant exposes one energy collection per dashboard plus a default. Each collection has its own selected period (today, week, custom range). By default, the card binds to the active dashboard's collection.

Set collection_key to follow a specific dashboard. Keys follow the pattern energy_<dashboard_url>.

example.yaml

type: custom:energy-flow-card-plus
collection_key: energy_living_room
entities:
  grid:
    entity: sensor.grid_energy
  solar:
    entity: sensor.solar_energy

collection_keystring

The key of the energy collection to follow. Leave unset to track the active dashboard.

Flow formulas

The card animates dots along the lines. There are two formulas controlling how fast they travel.

Default

Legacy (relative)

Each line's flow rate is calculated relative to all the others. When one line dominates, dots accelerate to keep a roughly constant dot count.

max - (value / totalLines) * (max - min);
// max = max_flow_rate
// min = min_flow_rate
// value = line value (e.g. solar to grid)
// totalLines = sum of all line values

Recommended

New (absolute)

Speed maps directly to the value. A constant value always animates at the same speed regardless of other lines. Set use_new_flow_rate_model: true and tune the min/max_expected_power + min/max_flow_rate pairs.

if (value > maxIn) return maxOut;
return ((value - minIn) * (maxOut - minOut)) / (maxIn - minIn) + minOut;