Energy Breakdown Card

Overview

A custom Home Assistant Lovelace card that visualizes how your energy use is broken down across sources — as a donut or stacked bar.

HACS customYAML & UI editorDonut + bar

Energy Breakdown Card turns a list of energy sensors into a clean proportional chart. It is designed to fit the design language of the latest Lovelace UI: rounded corners, soft shadows, HA color tokens, and a quiet visual presence that adapts to your theme.

Scope. This card displays accumulated energy values (Wh / kWh) and shows how a total is split across sources. For an animated flow diagram between grid, solar, battery and home use the Energy Flow Card Plus instead.

Highlights

  • Two visual variants — donut and stacked bar
  • Optional legend with names, values, and percentages
  • Mobile-friendly tooltip on tap, desktop hover tooltip
  • Per-entity color, icon, name, multiplier, and actions
  • group_others + max_items to keep the chart readable
  • Optional sync to the Home Assistant energy dashboard period

What's in this section

Installation
HACS custom repository or manual install.
Configuration
Every option, with defaults and types.
Examples
Copy-pastable configs for common setups.

Source & releases

The card is distributed via flixlix/energy-breakdown-card, but the source code lives in the monorepo at flixlix/flixlix-cards. Issues and feature requests are tracked there.

View source on GitHub