Energy Breakdown Card

Installation

Install it from its link in Home Assistant's Marketplace, or as a custom repository in HACS before 2026.11. Manual installation is also supported.

Not in the default catalog yet
Energy Breakdown Card is installed from its link: the button below opens it in your Home Assistant, in the Marketplace on 2026.11 and newer or in HACS before that.
Open in Home Assistant

Marketplace (Home Assistant 2026.11 and newer)

  1. Go to Settings → Marketplace.
  2. In the upper-right corner, select Add from link, enter https://github.com/flixlix/energy-breakdown-card and select Add. The Marketplace asks you to connect GitHub first if you haven't yet.
  3. Open Energy Breakdown Card in the list and select Install. The Marketplace adds it as a dashboard resource.
  4. Reload your browser.

HACS (Home Assistant 2026.10 and older)

  1. In Home Assistant, open HACS.
  2. Click the ⋮ menu in the top-right and choose Custom repositories.
  3. Add the repository URL https://github.com/flixlix/energy-breakdown-card with category Dashboard, then click Add.
  4. Search for Energy Breakdown Card in HACS and click Download.
  5. Reload your dashboard / clear browser cache.

Manual installation

Download energy-breakdown-card.js from the latest release and copy it into config/www/.

If you configure dashboards via YAML, register the resource:

yaml
lovelace:
  resources:
    - url: /local/energy-breakdown-card.js
      type: module

If you prefer the graphical editor: enable advanced mode in your user profile, go to Settings → Dashboards → ⋮ → Resources, click Add resource and paste:

text
/local/energy-breakdown-card.js
Installed from the Marketplace or HACS?
It registers the resource for you. The Marketplace serves it from/local/community/energy-breakdown-card/energy-breakdown-card.js; HACS used/hacsfiles/energy-breakdown-card/energy-breakdown-card.js, which keeps working.

Verify the install

  1. Reload your browser cache (hard refresh).
  2. Edit a dashboard and click Add card → Custom: Energy Breakdown Card.
  3. Use the UI editor or paste the minimal config below.
yaml
type: custom:energy-breakdown-card
chart_type: bar
entities:
  - entity: sensor.solar_energy_today
  - entity: sensor.grid_energy_today
  - entity: sensor.battery_energy_today