Energy-First? Energie-Dashboard: beliebig anpassen

Preview Energy-First? Energie-Dashboard: beliebig anpassen

Das Home Assistant Energie-Dashboard bietet direkt nach der Installation einen umfassenden Überblick über den Energieverbrauch, ist jedoch in seinen Anpassungsmöglichkeiten zunächst stark begrenzt. Spannend ist jedoch der aktuelle Trend, dessen exklusive Features – wie den Energie-Datepicker – für allgemeine Dashboards freizugeben.

Energie-Dashboard = Sammlung spezieller Lovelace Karten

Allgemein ist das Energie-Dashboard eine Sammlung spezieller Karten. Eingebettet im Energie-Dashboard ermöglichen diese mit minimalem Konfigurationsaufwand out of the box eine wirklich gute Übersicht, leider aber mit sehr wenigen Anpassungsmöglichkeiten. Versteht mich nicht falsch: Das Dashboard ist großartig und ich verwende es jeden Tag, dennoch steigt bei mir mit längerer Nutzung der Wunsch ein paar Kleinigkeiten anzupassen oder ergänzen zu können. Das integrierte Energie-Dashboard kann zwar nicht geändert, dafür aber in einer eigenen Ansicht nachgebaut und damit angepasst werden.

Energie-Karten in einer eigenen Ansicht

Die Karten des Energie-Dashboards können in einer beliebigen anderen Ansicht verwendet werden.

Mit den folgenden Beispielen kann das Energie-Dashboard komplett nachgebaut werden und damit nahezu beliebig angepasst oder erweitert werden:

Energie-Datumsauswahl

Damit die Datumsauswahl gleich dem Energy-Dashboard fixiert wird, kann diese in der Fußzeile hinzugefügt werden:

type: energy-date-selection
collection_key: energy_1

Mit dem optionionalen Key "collection_key" kann der Date-Picker mit bestimmten Cards verknüpft werden. Dazu einfach den Collection_key auch auf den folgenden Cards hinzufügen.

Damit das Kartenmenü "Nach oben" aufklappt, kann in YAML noch folgende Eigenschaft hinzufgefügt werden:

...
vertical_opening_direction: up
✓
Die Datumsauswahl kann auch für Statistikdiagramme verwendet werden,
siehe: Statistikdiagramm: Datum / Zeit Auswahl

Energieverbrauchsgrafik

type: energy-usage-graph
collection_key: energy_1
title: Stromnutzung

Um die Karte direkt anzupassen oder mit bestimmten Entitäten zu erwetiern, kann diese mit der HACS-Integration: energy-custom-graph-card nachgebaut werden:

[+]
type: custom:energy-custom-graph-card
series:
  - chart_type: bar
    stat_type: change
    calculation:
      terms:
        - operation: add
          statistic_id: sensor.pv_west_sum
        - operation: add
          statistic_id: sensor.pv_ost_sum
        - operation: add
          statistic_id: sensor.balkon_yieldtotal
        - operation: subtract
          statistic_id: sensor.byd_total_charging
        - operation: subtract
          statistic_id: sensor.grid_feed_energy
          multiply: 0.001
    source: calculation
    name: PV-Eigenverbrauch
    color: "--energy-solar-color"
    stack: consumption
    clip_min: 0
  - statistic_id: sensor.grid_consumption_energy
    chart_type: bar
    stat_type: change
    stack: consumption
    color: "--energy-grid-consumption-color"
    multiply: 0.001
    name: Netz-Bezug
  - statistic_id: sensor.grid_feed_energy
    chart_type: bar
    stat_type: change
    stack: consumption
    color: "--energy-grid-return-color"
    multiply: -0.001
    y_axis: left
    name: Netz-Einspeisen
  - statistic_id: sensor.byd_total_charging
    chart_type: bar
    stat_type: change
    stack: consumption
    color: "--energy-battery-in-color"
    multiply: -1
    name: Akku laden
  - statistic_id: sensor.byd_total_discharging
    chart_type: bar
    stat_type: change
    stack: consumption
    color: "--energy-battery-out-color"
    name: Akku entladen
timespan:
  mode: energy
collection_key: energy_1
y_axes:
  - id: left
    unit: kWh
show_stack_sums: true
title: Stromnutzung
grid_options:
  columns: full
  rows: 6.8

Aktuell können die im Energie-Dashboard konfigurierten Entitäten nicht als Variable in der energy-custom-graph-card verwendet werden, entsprechend müssen die Entities in der Karte mit deren ID hinterlegt werden. Für den PV-Eigenverbrauch habe ich in dem Beispiel 3 PV-Flächen, den Akku-Ladestrom und den Netzüberschuß für die Berechnung verwendet.

Diagramm zur Solarproduktion

type: energy-solar-graph
collection_key: energy_1
title: PV-Erzeugung

Mit der HACS-Integration: energy-custom-graph-card nachgebaut:

[+]
type: custom:energy-custom-graph-card
series:
  - statistic_id: sensor.pv_west_sum
    chart_type: bar
    stat_type: change
    color: "--energy-solar-color"
    stack: pv
    name: West
  - statistic_id: sensor.pv_ost_sum
    chart_type: bar
    stat_type: change
    stack: pv
    color: "#f9c446"
    name: Ost
  - statistic_id: sensor.balkon_yieldtotal
    chart_type: bar
    stat_type: change
    color: "#fffc7a"
    stack: pv
    name: Balkon
  - chart_type: line
    stat_type: change
    source: forecast
    pv_production_entity: sensor.pv_west_sum
    color: "--energy-solar-color"
    name: West FC
    stack: fc
    line_style: dashed
  - chart_type: line
    stat_type: change
    source: forecast
    pv_production_entity: sensor.pv_ost_sum
    name: Ost FC
    color: "#f9c446"
    stack: fc
    line_style: dashed
  - chart_type: line
    stat_type: change
    name: Balkon FC
    source: forecast
    pv_production_entity: sensor.balkon_yieldtotal
    color: "#fffc7a"
    stack: fc
    line_style: dashed
timespan:
  mode: energy
collection_key: energy_1
grid_options:
  columns: full
  rows: 7
y_axes:
  - id: left
    unit: kWh
show_stack_sums: true
title: PV-Erzeugung

Gasverbrauchsdiagramm

type: energy-gas-graph
collection_key: energy_1
title: Gasverbrauch

Mit der HACS-Integration: energy-custom-graph-card nachgebaut:

[+]
type: custom:energy-custom-graph-card
series:
  - statistic_id: sensor.heating_water_energy
    chart_type: bar
    stat_type: change
    color: "#8e021b"
    stack: heat
  - statistic_id: sensor.heating_heat_energy
    chart_type: bar
    stat_type: change
    color: "#c54242"
    stack: heat
  - statistic_id: sensor.warmwasser_summation_delivered
    chart_type: bar
    stat_type: change
    color: "#fd736d"
    stack: heat
timespan:
  mode: energy
title: Heizung
collection_key: energy_1
grid_options:
  columns: 34
  rows: 7
show_stack_sums: true

Wasserverbrauchsdiagramm

type: energy-water-graph
collection_key: energy_1
title: Wasserverbrauch

Mit der HACS-Integration: energy-custom-graph-card nachgebaut:

type: custom:energy-custom-graph-card
series:
  - statistic_id: sensor.water_value
    chart_type: bar
    stat_type: change
    color: "--energy-water-color"
    show_in_legend: true
timespan:
  mode: energy
title: Wasserverbrauch
collection_key: energy_1
grid_options:
  columns: 12
  rows: 6.8

Energie-Verteilung

type: energy-distribution
link_dashboard: false
collection_key: energy_1
title: Energieverteilung

Netzenergiebilanz

type: "energy-grid-balance"

Energiequellen-Tabelle

type: energy-sources-table
collection_key: energy_1
types: grid,gas,overview,battery,solar,water
show_only_totals: true
title: Quellen

Stromquellen

type: power-sources-graph
collection_key: energy_1
title: Stromquellen
show_legend: false

Mit der HACS-Integration: energy-custom-graph-card nachgebaut:

[+]
type: custom:energy-custom-graph-card
series:
  - chart_type: line
    stat_type: change
    name: pv
    color: "--energy-solar-color"
    fill: true
    fill_opacity: 0.3
    hidden_by_default: false
    line_style: solid
    y_axis: left
    calculation:
      terms:
        - operation: add
          statistic_id: sensor.pv_west
          stat_type: mean
          multiply: 0.001
          clip_min: 0
          add: 0
        - operation: add
          statistic_id: sensor.pv_ost
          clip_min: 0
          add: 0
          multiply: 0.001
          stat_type: mean
        - operation: add
          clip_min: 0
          add: 0
          statistic_id: sensor.balkon_power
          stat_type: mean
          multiply: 0.001
    source: calculation
  - chart_type: line
    stat_type: mean
    fill: true
    color: "--energy-grid-consumption-color"
    multiply: 0.001
    fill_opacity: 0.6
    line_opacity: 1
    stack: energyplus
    name: Netz
    calculation:
      terms:
        - operation: add
          statistic_id: sensor.grid_consumption_power
        - operation: add
          statistic_id: sensor.grid_feed_power
          multiply: -1
    source: calculation
  - chart_type: line
    stat_type: change
    calculation:
      terms:
        - operation: subtract
          statistic_id: sensor.byd_charging
          stat_type: mean
          multiply: 0.001
        - operation: add
          statistic_id: sensor.byd_discharging
          stat_type: mean
          multiply: 0.001
    source: calculation
    name: Batterie
    color: "--energy-battery-out-color"
    stack: energyplus
    fill: true
    fill_opacity: 0.3
  - chart_type: line
    stat_type: mean
    hidden_by_default: false
    name: Verbrauch
    fill: true
    color: "#ffffff"
    line_style: dashed
    line_opacity: 1
    calculation:
      terms:
        - operation: add
          statistic_id: sensor.grid_consumption_power
          stat_type: mean
          multiply: 0.001
        - operation: add
          statistic_id: sensor.pv_west
          multiply: 0.001
          stat_type: mean
        - operation: add
          statistic_id: sensor.pv_ost
          multiply: 0.001
          stat_type: mean
        - operation: add
          statistic_id: sensor.balkon_power
          stat_type: mean
          multiply: 0.001
        - operation: subtract
          statistic_id: sensor.grid_feed_power
          stat_type: mean
          multiply: 0.001
        - operation: subtract
          statistic_id: sensor.byd_charging
          stat_type: mean
          multiply: 0.001
        - operation: add
          statistic_id: sensor.byd_discharging
          stat_type: mean
          multiply: 0.001
    source: calculation
timespan:
  mode: energy
collection_key: energy_1
show_stack_sums: true
expand_legend: false
y_axes:
  - id: left
    fit_y_data: true
    center_zero: false
    logarithmic_scale: false
    unit: kW
grid_options:
  columns: full
  rows: 6
title: Stromquellen
show_unit: false
hide_legend: false
aggregation:
  energy_picker:
    day: 5minute
    hour: 5minute
    week: hour
    month: hour
    year: day

Netzneutralitätsanzeige

type: energy-grid-neutrality-gauge
collection_key: energy_1

Solarverbrauchsanzeige

type: energy-solar-consumed-gauge
collection_key: energy_1

Autarkiegrad

type: energy-self-sufficiency-gauge
collection_key: energy_1

Energiediagramm für Geräte

type: energy-devices-graph
max_devices: 7
collection_key: energy_1

Detail-Geräte-Energiediagramm

type: energy-devices-detail-graph
collection_key: energy_1
title: Detailverbrauch Einzelgeräte
max_devices: 5

Sankey-Diagramm: Energiefluss

type: energy-sankey
collection_key: energy_1
title: Energiefluss

Aktueller Leistungsfluss

type: power-sankey
collection_key: energy_0
title: Aktueller Leistungsfluss

Meldung Daten vergleichen

type: energy-compare
collection_key: energy_1

Die Meldung erscheint bei der Auswahl "Daten vergleichen"

Kohlenstoffverbrauch

type: energy-carbon-consumed-gauge
collection_key: energy_1

Energy Badge

type: power-total

Weitere Karten für beliebige Entitäten

Statistikdiagramm

Für die Statistikdiagramm-Karte existiert eine Möglichkeit mit den Home Assistant Board-Mitteln eine Karte mit der Energie-Datumsauswahl zu synchronisieren und beliebige Entitäten mit aktiver Statistik zu verwenden:

chart_type: bar
type: statistics-graph
entities:
  - sensor.heating_heat_energy
title: Heizung-Energie
stat_types:
  - change
hide_legend: false
collection_key: energy_1
energy_date_selection: true

Statistik

type: statistic
entity: sensor.water_value
stat_type: change
collection_key: energy_1
period: energy_date_selection

Must-have HACS-Karte: energy-custom-graph-card

Wesentlich mehr Flexibilität als die Statistikdiagramm-Karte bietet die HACS-Karte: energy-custom-graph-card. Auch diese Karte synchronisiert die Energie-Datumsauswahl, verwendet die integrierte ECharts-Instanz - was ein natives Styling mit minimalem Overhead liefert - und die Charts können direkt im grafischen Editor zusammengestellt werden. Für aggregierte Statistiken können der Typ (Veränderung, Summe, Mittelwert, Minimum, Maximum, Zustand) sowie die Reihen individuell ausgewählt werden inklusive der Möglichkeit die Daten mit einem anderen Zeitraum zu vergleichen.

Die Installation der Karte erfolgt über HACS, durch Angabe eines benutzerdefinierten Repositories:

SoftwareEnergy-custom-graph
GitHubhttps://github.com/Thyraz/energy-custom-graph
aktuelle Version 0.6.3
gefunden13.06.2026

 

Datum fixieren 

✓
Update März 2026: mit dem jüngsten Home Assistant Update kann die Datumsauswahl einfach zur Fußzeile hinzugefügt werden: verhält sich dann gleich dem Energy-Dashboard:

 

Alternative Lösung, Auch mit der HACS-Integration: card-mod ist es möglich den Date-Picker in der Ansicht zu fixieren:

type: energy-date-selection
collection_key: energy_1
card_mod:
  style: |
    ha-card {
        position: fixed;
        z-index: 3;
        margin-top: -10px;
        height: 40px!important; 
        width: 500px;
        max-width:100%;
        margin-right: auto;
        margin-left: auto;transition: none !important;
     }
grid_options:
  columns: full
  min-rows: 0.6
  rows: 0.6
âš 
Update 16.1.2026: Style geändert auf ha-card and height: 40px!important; 
Mit den jüngsten Home Assistant Versionen funktioniert der Selector .type-energy-date-selection nicht mehr.

Kritik: Energy-First? vs. universelle Karte für die Datumsauswahl?

Warum existiert für Home Assistant nicht eine universelle Karte für die Datumsauswahl?

Der Energie-Datepicker funktionierte zunächst bedauerlicherweise nur mit den Energie-Karten. An dieser Stelle hat es den Anschein, dass die Entwickler das Energie-Dashboard schnell veröffentlichen wollten, ohne den Unterbau dafür zu schaffen. Mit Unterbau meine ich Karten die universell für alle Dashboards eingesetzt werden können. Das Thema ist bekannt und daher gibt es beispielsweise auch ein Bestreben die Funktionalitäten für alle Karten zugänglich zu machen, siehe: Statistikdiagramm: Datum / Zeit Auswahl. Was aktuell bleibt ist der Name der Karte: "energy-date-selection". Wird die Karte nach und nach zu einer universellen Datums-Auswahl für beliebige Karten, verrät der Name der Karte "energy-" zumindest dessen Herkunft. 

Bekannte Fehlverhalten

Immer wieder mal wollte ich nicht die Statistik des letzten Kalenderjahres, sondern der letzten 365-Tage, was über den Datepicker nicht gerade mit einem Klick erledigt werden kann. Bei der Auswahl z. B. Mitte Dezember letzten Jahres bis Mitte Dezember dieses Jahres hatte ich dann bemerkt, dass sich die Berechnung der Statistiken aus zweimal den ganzen Dezember zusammensetzt: 13 Monate, was ein für mich komplett unerwartetes Verhalten ist. Ausgelöst dadurch, dass bei Zeitspannen größer ein Monat immer ganze Monate angezeigt werden und die Berechnung an die Anzeige gekoppelt ist. Aus diesem Grund habe ich einen Pull-Request auf GitHub erstellt: Bei einer Auswahl außerhalb eines ganzen Monats verwendet das Dashboard jetzt einzelne Tage: mehr eine schnelle Notlösung. In einem anderen Request habe ich zusätzliche Zeitabschnitte hinzugefügt: letzte 24 Stunden, letzte 30 Tage, letzte 365 Tage.

Für die Zeitspanne: letzte 12 Monate werden aktuell nur ganze Monate angezeigt, wodurch die Berechnung der Statistik stimmt. Anders bei der Anzeige der letzten 7 Tage: hier wird auch der aktuelle Tag herangezogen und spätestens beim Vergleich, wird dann ein ganzer Tag mit einem halben Tag verglichen:

Generell ist die Funktion "Daten vergleichen" nicht für alle Karten verfügbar, speziell neuere Karten zeigen meist nur die aktuelle Zeitspanne.

Quellen:

Aktuelle Pull-Requests

  • home-assistant/frontend/pull/29483
  • home-assistant/frontend/pull/29628
  • home-assistant/frontend/pull/29629
  • home-assistant/frontend/pull/29620
  • YouTube Video

    Diesen Artikel als YouTube-Video:

    Fazit

    Das Energie-Dashboard in Home Assistant überzeugt durch spezialisierte Karten und eine strukturierte Übersicht, stößt jedoch bei der individuellen Anpassung an Grenzen. Aktuell gibt es Bestrebungen, Kernfunktionen – wie etwa den spezifischen Energie-Zeitraumwähler (Datepicker) – auch für andere Karten zu öffnen. Während das Modul bereits einen hohen Mehrwert bietet, liegt das größte Potenzial in einer gesteigerten Flexibilität und der systemweiten Integration seiner Funktionen.

    positive Bewertung({{pro_count}})
    Beitrag bewerten:
    {{percentage}} % positiv
    negative Bewertung({{con_count}})

    DANKE für deine Bewertung!

    Beitrag erstellt von Bernhard | Veröffentlicht: 13.01.2025 | Aktualisiert: 13.03.2026 | Translation English |🔔 | Kommentare:1

    Fragen / Kommentare


    (sortiert nach Bewertung / Datum) [alle Kommentare(am besten bewertete zuerst)]

    ✍Ronald
    30.01.2026 13:37
    Hallo, in einem Dashboard gibst du die Kosten pro Gerät an. Wie kann ich das machen, wenn ich einen dynamischen Vertrag habe, bei dem sich der Preis alle 15 Minuten ändert?

     
    Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu Mehr Details