Source: https://cards.flixlix.com/energy-breakdown-card

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

The real card, live, under Energy Period Selector Plus: pick a period to see it change.

**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](https://cards.flixlix.com/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

-   [InstallationMarketplace, HACS custom repository or manual install.](https://cards.flixlix.com/energy-breakdown-card/installation)
-   [ConfigurationEvery option, with defaults and types.](https://cards.flixlix.com/energy-breakdown-card/configuration)
-   [ExamplesCopy-pastable configs for common setups.](https://cards.flixlix.com/energy-breakdown-card/examples)

## Source & releases

The card is distributed via [flixlix/energy-breakdown-card](https://github.com/flixlix/energy-breakdown-card), but the source code lives in the monorepo at [flixlix/flixlix-cards](https://github.com/flixlix/flixlix-cards). Issues and feature requests are tracked there.

[View source on GitHub](https://github.com/flixlix/flixlix-cards)