Probleme mit Apexchart Card

Ich will eine apexcharts-card verwenden um den aktuellen Stromverbrauch und Solarerzeugung anzuzeigen. Allerdings wird nur der Netzbezug Graph angezeigt alle anderen Graphen werden nicht angezeigt. Aber auch die anderen Sensoren haben Daten, wenn ich oben auf die Werte z.B. 425 bei “aus Solar” klicke dann geht auch entsprechend das more-info Popup auf und zeigt die Daten an. Kann mir jemand helfen?

Ich habe das Diagramm aus dem Thema “Zeigt her eure Dashboards!” allerdings ist der Beitrag von @guevara777 schon sehr alt und vielleicht hat sich an der Konfiguration etwas geändert.

image

type: custom:apexcharts-card
card_mod:
  style: |
    ha-card {
      padding: 0px 0px 0px 0px;
      #margin-bottom: -15px;
    }
    #state__value > #state {
      font-size: 1.2em !important;
    }
    .apexcharts-tooltip-series-group {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      margin-top: 0px !important;
      margin-bottom: 0px !important;
      display: none;
      text-align: left;
      justify-content: left;
      align-items: center;
    }
    #header {
        padding: 3px !important;
    }        
apex_config:
  chart:
    height: 120px
  legend:
    show: false
  tooltip:
    items:
      display: flex
  title:
    text: Stromverbrauch
    align: center
    margin: 0
    offsetX: 0
    offsetY: 15
    floating: true
    style:
      fontSize: 1rem
      fontWeight: bold
      color: var(--primary-text-color)
yaxis:
  - decimals: 0
    apex_config:
      tickAmount: 4
      forceNiceScale: true
      title:
        text: Watt
        rotate: 90
all_series_config:
  stroke_width: 2
  float_precision: 0
  show:
    in_header: raw
    legend_value: false
  type: area
  opacity: 0.2
  statistics:
    type: mean
    period: 5minute
span:
  end: minute
graph_span: 24h
header:
  show: true
  title: ""
  show_states: true
  colorize_states: true
  standard_format: true
  floating: false
series:
  - entity: sensor.alpha_ess_actual_house_consumption
    name: Haus
    color: grey
  - entity: sensor.alpha_ess_actual_production
    name: aus Solar
    color: orange
  - entity: sensor.alpha_ess_total_power_grid
    name: aus Netz
    color: lightblue
  - entity: sensor.alpha_ess_battery_load
    name: Akku laden
    color: green
  - entity: sensor.alpha_ess_battery_unload
    name: Akku entladen
    color: red

Besteht dein Problem noch? Ich habe die Karte jetzt bei mir auch implementiert, dein Code hat auf Anhieb funktioniert (nach Anpassung der Entities für mich natürlich).

Im Screenshot fällt natürlich auf, dass Haus und “aus Netz” nahezu identisch sind und sich entsprechend überlagern. Auch der Solar Ertrag ist verhältnismäßig gering und damit quasi nicht sichtbar. Eventuell hilft es wenn du zumindest testweise auf den type mal auf line statt area schaltest?

oder du ersetzt mal den Teil

  statistics:
    type: mean
    period: 5minute

durch z.B.

  group_by:
    duration: 15min
    func: median

Das statistics + mean filtert schicht alles raus was an einem Tag an dem die Sonne nur alle paar Minuten durch eine Wolkenlücke blinzelt komplett weg.

median ist in der Tat besser, aber 15minute finde ich persönlich zu lange. Da werden Spitzen dann doch wieder geglättet.

Hier mal meine Konfiguration:

type: custom:apexcharts-card
experimental:
  color_threshold: true
  brush: false
graph_span: 24h
header:
  show: true
  title: ""
  show_states: true
  colorize_states: true
  standard_format: true
  floating: false
apex_config:
  chart:
    height: 175px
  legend:
    show: false
  tooltip:
    items:
      display: flex
  title:
    text: ""
    align: center
    margin: 0
    offsetX: 0
    offsetY: 15
    floating: true
    style:
      fontSize: 1rem
      fontWeight: bold
      color: var(--primary-text-color)
yaxis:
  - decimals: 0
    apex_config:
      tickAmount: 2
      forceNiceScale: true
all_series_config:
  type: area
  curve: smooth
  stroke_width: 1.2
  float_precision: 0
  show:
    in_header: raw
    legend_value: false
  opacity: 0.2
  color_threshold:
    - value: 0
      opacity: 0.1
    - value: 1000
      opacity: 0.7
    - value: 2000
      opacity: 1
  group_by:
    func: median
    duration: 5minute
series:
  - entity: sensor.scb_sum_power_of_all_pv_dc_inputs
    name: aus Solar
    color: orange
  - entity: sensor.scb_home_power
    name: Haus
    color: lightblue
  - entity: sensor.scb_battery_soc
    name: Akku SoC
    color: green
  - entity: sensor.scb_autarky_day

und so sieht das heute aktuell aus:
image

EDIT: die beiden letzten Werte (SoC und Autarkie) werden nicht angezeigt, weil sie nicht zur Skala (Y-Achse) passen. Dafür könnte man eine zweite Y-Achse definieren, aber dann wäre der Chart doch ziemlich überladen.

Super vielen Dank für eure Hilfe jetzt wird es korrekt angezeigt!!

Ich zeige das Diagramm in einem Abschnitts-Dashboard an und würde es gern über 3 von 4 Spalten anzeigen, da sonst die Details doch schwer zu erkennen sind. Aber ich bekomme es nicht hin. Mit den grid_options funktioniert es leider nicht. Habt ihr hier noch einen Tipp?

grid_options:
  columns: full

Ach ja und die Anzeige des Solar Vorcast als Linie wäre noch interessant, wie bindet man das noch mit ein? Wie aus meinen Fragen zu erkennen habe ich von der Apexchart Card keine Ahnung

Da gibt es noch einen Bug: issue 736. Der Trick ist aktuell, die Prüfung der Konfiguration abzuschalten. Beispielsweise so:

layout_options:
  grid_columns: full
experimental:
  disable_config_validation: true

Im ersten Ansatz musst du doch nur die passende Entität (“entity”) am Ende hinzufügen. Allerdings zeigst du dir ja aktuell die Werte der letzten 24 Stunden an. Ist die Vorschau da verfügbar? Dann hättest du immerhin einen Vergleich Vorschau und tatsächlichem Ertrag, also quasi eine Validierung der Vorschau.

Alternativ könntest du auf eine fixes Raster der Tagesansicht bspw. von 5 bis 22 Uhr wechseln:

graph_span: 17h
span:
  start: day
  offset: +5

Damit die aktuellen Werte nicht einfach verlängert werden, musst du unter all_series_config ergänzen:

  extend_to: now

Bei der Vorhersage musst du den Extend Eintrag natürlich wieder anpassen, also einfach wiederholen und auf end setzen. Hier ein Beispiel mit meinem Ertrag von gestern als gestrichelter Vergleich:

  - entity: sensor.scb_sum_power_of_all_pv_dc_inputs
    name: Solar gestern
    type: line
    color: lightgrey
    offset: "-1d"
    stroke_dash: 1

Das kannst du dann entsprechend anpassen (gestrichelt oder nicht, Farbe, etc.). Im Ergebnis sieht das wie folgt aus:
image

Danke für die Hilfe,

anbei mein code

type: custom:apexcharts-card
experimental:
  color_threshold: true
  brush: false
  disable_config_validation: true
grid_options:
  columns: full
header:
  show: true
  title: ""
  show_states: true
  colorize_states: true
  standard_format: true
  floating: false
graph_span: 24h
span:
  start: day
apex_config:
  chart:
    height: 350
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: true
    toolbar:
      show: false
    xaxis.type: datetime
  legend:
    show: false
  stroke:
    width: 1
    curve: smooth
all_series_config:
  type: area
  curve: smooth
  stroke_width: 1.2
  float_precision: 0
  show:
    in_header: raw
    legend_value: false
  opacity: 0.2
  color_threshold:
    - value: 0
      opacity: 0.1
    - value: 1000
      opacity: 0.7
    - value: 2000
      opacity: 1
  group_by:
    func: median
    duration: 5minute
  extend_to: now
series:
  - entity: sensor.rct_power_storage_grid_power
    name: Netz
    color: red
  - entity: sensor.rct_power_storage_generator_a_power
    name: Solar
    color: orange
  - entity: sensor.rct_power_storage_battery_power
    name: Batterie
    color: green
  - entity: sensor.rct_power_storage_consumer_power
    name: Haushalt
  - entity: sensor.rct_power_storage_battery_state_of_charge
    name: SoC
    color: black
  - entity: sensor.rct_power_storage_generator_a_power
    name: Solar gestern
    type: line
    color: gray
    offset: "-1d"
    show:
      in_header: false

jetzt will ich nur noch sensor.energy_production_today_remaining einbinden. wie kann man das am besten machen?

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

Was genau gibt der Sensor aus und wie möchtest du ihn angezeigt haben? Nur im Header, nur als Linie im Chart, für den ganzen Tag oder nur für den Rest des Tages?

Und passt die in die Achse? Dein SoC beispielsweise passt in der Skalierung auch nicht in die Watt-Anzeige der Y-Achse. Hier würde ich dir noch empfehlen, eine zweite Achse einzuführen:

Danke, werde ich mir mal ansehen. Bei dem SOC habe ich es nicht geschaft. bei mir sind dann die 0% immer ganz unten. Sie sollten aber auf der 0 der Watt sein. Wie macht man das richtig?

Meine Konfiguration für die beiden Achsen sieht so aus:

yaxis:
  - id: watt
    decimals: 0
    apex_config:
      tickAmount: 2
      forceNiceScale: true
  - id: prozent
    decimals: 0
    opposite: true
    min: 0
    max: 100
    apex_config:
      tickAmount: 2
      forceNiceScale: true

Die Achse wird dann pro series-entity gesetzt: yaxis_id: watt.

Allerdings habe ich keine negativen Werte, daher passt das bei mir so. Wenn du min bei der Prozent-Achse auf -100 setzt, dann sollte 0% wieder mittig dargestellt werden.

Das wiederum könnte Probleme verursachen, wenn du Tage ohne Einspeisung ins Netz hast, weil du dann keine negativen Werte hast. In diesem Fall müsstest du für watt dann auch eine feste Skala von -6000 bis +6000 setzen. Damit würde aber im Winter die automatische Skalierung wegfallen, also wenn du an einem Tag nur max 4kW erzeugst…

Wenn das keine Lösung für dich ist, dann würde ich überlegen, den SoC nur im Header anzuzeigen. Mit der aktuellen Skalierung hast du ja ohnehin nur eine horizontale schwarze Linie, die nichts aussagt. Das geht über hidden_by_default, was aber noch experimental ist und entsprechend eingeschaltet werden muss:

type: custom:apexcharts-card
experimental:
  hidden_by_default: true
series:
  - entity: sensor.temperature
    show:
      hidden_by_default: true
  - entity: sensor.temperature_office

Und ja, mir macht tüfteln mit Charts einfach Spaß. :stuck_out_tongue_closed_eyes:

Danke fürs teilen. Hat funktioniert. nicht 100% elegant aber es sieht soweit gut aus :slight_smile:

Habe mir dies für den gestringen Tag gebaut das ich sehe wie es gestern war.

type: custom:apexcharts-card
experimental:
  color_threshold: true
  brush: false
  disable_config_validation: true
update_interval: 1min
grid_options:
  columns: full
header:
  show: false
  title: Energie gestern
  show_states: true
  colorize_states: true
  standard_format: true
  floating: false
graph_span: 24h
yaxis:
  - id: watt
    decimals: 0
    min: -6000
    max: 6000
    title:
      text: Watt
    apex_config:
      tickAmount: 10
      forceNiceScale: true
  - id: prozent
    show: true
    decimals: 0
    opposite: true
    min: -100
    max: 100
    unit_of_measurement: "%"
    title:
      text: SoC
    labels:
      style:
        colors: gray
    apex_config:
      tickAmount: 10
      forceNiceScale: true
      foreColor: blue
span:
  start: day
apex_config:
  chart:
    height: 350
    zoom:
      type: x
      enabled: true
    toolbar:
      show: false
    xaxis.type: datetime
  legend:
    show: false
  stroke:
    width: 1
    curve: smooth
all_series_config:
  type: area
  curve: smooth
  stroke_width: 1.2
  float_precision: 0
  show:
    in_header: raw
    legend_value: false
  opacity: 0.2
  color_threshold:
    - value: 0
      opacity: 0.1
    - value: 1000
      opacity: 0.7
    - value: 2000
      opacity: 1
  group_by:
    func: median
    duration: 5minute
  extend_to: now
series:
  - entity: sensor.rct_power_storage_grid_power
    name: Netz
    color: red
    yaxis_id: watt
    offset: "-1d"
  - entity: sensor.rct_power_storage_generator_a_power
    name: Solar
    color: orange
    yaxis_id: watt
    offset: "-1d"
  - entity: sensor.rct_power_storage_battery_power
    name: Batterie
    color: green
    yaxis_id: watt
    offset: "-1d"
  - entity: sensor.rct_power_storage_consumer_power
    name: Haushalt
    color: purple
    yaxis_id: watt
    offset: "-1d"
  - entity: sensor.rct_power_storage_battery_state_of_charge
    name: SoC
    color: lightgray
    opacity: null
    yaxis_id: prozent
    offset: "-1d"

heutige tag:

type: custom:apexcharts-card
experimental:
  color_threshold: true
  brush: false
  disable_config_validation: true
update_interval: 1min
grid_options:
  columns: full
header:
  show: true
  title: ""
  show_states: true
  colorize_states: true
  standard_format: true
  floating: false
graph_span: 24h
yaxis:
  - id: watt
    decimals: 0
    min: -6000
    max: 6000
    title:
      text: Watt
    apex_config:
      tickAmount: 10
      forceNiceScale: true
  - id: prozent
    show: true
    decimals: 0
    opposite: true
    min: -100
    max: 100
    unit_of_measurement: "%"
    title:
      text: SoC
    labels:
      style:
        colors: gray
    apex_config:
      tickAmount: 10
      forceNiceScale: true
      foreColor: blue
span:
  start: day
apex_config:
  chart:
    height: 350
    zoom:
      type: x
      enabled: true
    toolbar:
      show: false
    xaxis.type: datetime
  legend:
    show: false
  stroke:
    width: 1
    curve: smooth
all_series_config:
  type: area
  curve: smooth
  stroke_width: 1.2
  float_precision: 0
  show:
    in_header: raw
    legend_value: false
  opacity: 0.2
  color_threshold:
    - value: 0
      opacity: 0.1
    - value: 1000
      opacity: 0.7
    - value: 2000
      opacity: 1
  group_by:
    func: median
    duration: 5minute
  extend_to: now
series:
  - entity: sensor.rct_power_storage_grid_power
    name: Netz
    color: red
    yaxis_id: watt
  - entity: sensor.rct_power_storage_generator_a_power
    name: Solar
    color: orange
    yaxis_id: watt
  - entity: sensor.rct_power_storage_battery_power
    name: Batterie
    color: green
    yaxis_id: watt
  - entity: sensor.rct_power_storage_consumer_power
    name: Haushalt
    color: purple
    yaxis_id: watt
  - entity: sensor.rct_power_storage_battery_state_of_charge
    name: SoC
    color: lightgray
    opacity: null
    yaxis_id: prozent
  - entity: sensor.rct_power_storage_generator_a_power
    name: Solar gestern
    type: line
    color: orange
    offset: "-1d"
    show:
      in_header: false
    yaxis_id: watt

wie baue ich jetzt einen wert ein welcher in KWh ist also ein PV forcast (Forecast.Solar)?

1 „Gefällt mir“

Eine kleine Anmerkung zu “heutigem Tag” und ich habe deinen Code im Zitat auf die entsprechende Stelle gekürzt: ich habe den gestrigen Wert auf “gestrichelt” gesetzt (stroke_dash: 1) und die opacity: 0.5 um es visuell stärker abzugrenzen. Ist aber natürlich Geschmackssache.

Zu deiner Frage:

wie baue ich jetzt einen wert ein welcher in KWh ist also ein PV forcast (Forecast.Solar)?

Das ist ein kumulierter Wert, der sprengt dir wieder die Watt-Skala. :thinking: Klar, du kannst noch eine Achse setzen, aber ich würde mir überlegen, dafür einen eigenen Chart anzulegen. Der kann ja von den Abmessung auch deutlich kleiner ausfallen. Anzeige da dann der Forecast als Zielwert (konstant über den Tag vermutlich), dazu der kumulierte tatsächliche Ertrag.

Mit einem Line Chart in der Art wie die anderen bekommst du dann eben eine horizontale Linie (Forecast) und eine die kontinuierlich näher an den Zielwert kommt.

Alternativ könntest du einen kombi-chart aus Linie für den Zielwert und einem Balken für den tatsächlichen Ertrag machen. Dann siehst du eben nur wie nah du am Forecast bist, aber nicht den zeitlichen Verlauf. Dafür sehr kompakt - kommt eben darauf an, was dir wichtig ist.

Super, Danke für den Tipp. Sieht super aus.

was ich halt noch mit reinbringen will (würde dann die PV erzeugung von gestern rausnehmen) ist halt der forecast.

Homeassistant hat es im Ene

rgiedashboard recht schön gemacht

Dann ist der Forecast doch nicht kumuliert für den Tag sondern zeitlich wie die Erzeugung auch. Dann kannst du doch Forecast.Solar einfach als entity in series eintragen wie bspw. sensor.rct_power_storage_generator_a_power?

Ich habe zwar eine PVA, aber bisher keinen Forecast. Woher nimmst du die Daten?

:slight_smile: das freut mich das ich jetzt auch mal was helfen kann

Danke, das hatte ich bisher nicht auf dem Radar. Ich hatte am Wochenende auch ein wenig recherchiert, das lässt sich wohl nicht einfach in einen eigenen Chart einbinden. Einen Feature-Request gibt es, aber der ist schon sehr alt.

Wenn du im Forum suchst, dann findest du einige Beiträge mit eigenen Lösungen, ich habe davon aber nichts ausprobiert. Das hier sah vielversprechend aus: Solar.Forecast Vorhersage in 1h, in 2h, in 3h, in 4h usw. als Einzelwerte - #12 von DerBERT (direkt danach noch eine verbesserte Version).

Auch Alternativen wie GitHub - BJReplay/ha-solcast-solar: Solcast Integration for Home Assistant geben eben keine Werte für jede Stunde aus.