Energy Breakdown Card

Installation

This card is not yet in the default HACS store — you need to add it as a custom repository first. Manual installation is also supported.

Custom repository required
Unlike the Power and Energy Flow cards, Energy Breakdown Card is not part of the default HACS index yet. Add the repository URL below as a Custom repository in HACS to install it.

HACS (custom repository)

  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.

The button below opens the repository inside HACS and pre-fills the dialog if you have My Home Assistant set up.

Open in HACS

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
HACS users
When installed via HACS the path becomes /hacsfiles/energy-breakdown-card/energy-breakdown-card.js. HACS usually registers it automatically.

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