ApexChart cards - Konfiguration als Balkengrafik nicht möglich

calima

Member
Hallo zusammen,

ich nutze ApexChart cards v2.1.2, um die historischen Werte einiger Sensoren auf meinen Dashboards anzuzeigen. Da mein Börsenstrompreis-Anbieter u.a. einen Sensor für den Verbrauch und die Kosten der aktuellen Stunde zur Verfügung stellt, wollte ich den Verlauf dieser Werte über die vergangenen Stunden als Balkengrafik darstellen. Allerdings kann ich den chart_type nicht auf column (Balken) umstellen, sondern nur als line (Graphen) oder als area (Graphen mit ausgefüllten Flächen) definieren. Wenn ich versuche, ihn als column zu konfigurieren, friert das Popup für die Einstellungen ein.

YAML:
type: custom:apexcharts-card
header:
  show: true
  title: tibber-Bruttokosten
  show_states: true
  colorize_states: true
now:
  show: false
  label: Now
series:
  - entity: sensor.current_consumption_cost_adjusted
    type: line
    stroke_width: 2
    extend_to: end
    unit: €/kWh

So sieht der Chart als Linie aus:
1736758284897.png

Wer kann helfen?
Vielen Dank!
 
Hier mal mein Code, der mir den Börsenstrompreis mittels Balken Graph anzeigt. Vergleich das mal mit deinem Code.
Code:
type: custom:apexcharts-card
header:
  show: false
graph_span: 48h
span:
  start: day
now:
  show: true
  label: Now
color_list:
  - var(--primary-color)
series:
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: column
    curve: smooth
    extend_to: false
    show:
      extremas: time
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_ct_per_kwh];
      }).slice(23,48);
    color_threshold:
      - value: 0
        color: "#186ddc"
      - value: 0.155
        color: "#04822e"
      - value: 0.2
        color: "#12A141"
      - value: 0.25
        color: "#79B92C"
      - value: 0.3
        color: "#C4D81D"
      - value: 0.35
        color: "#F3DC0C"
      - value: 0.4
        color: red
      - value: 0.5
        color: green
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: column
    curve: straight
    extend_to: end
    show:
      extremas: time
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_ct_per_kwh];
      }).slice(47,70);
    color_threshold:
      - value: 0
        color: "#186ddc"
      - value: 0.155
        color: "#04822e"
      - value: 0.2
        color: "#12A141"
      - value: 0.25
        color: "#79B92C"
      - value: 0.3
        color: "#C4D81D"
      - value: 0.35
        color: "#F3DC0C"
      - value: 0.4
        color: red
      - value: 0.5
        color: magenta
experimental:
  color_threshold: true
yaxis:
  - id: uurprijs
    decimals: 2
    apex_config:
      title:
        text: cent/kWh
      tickAmount: 4
apex_config:
  legend:
    show: false
  tooltip:
    x:
      show: true
      format: HH:00 - HH:59
 
Vielen Dank! Ich hatte schon versucht, in anderen Beispielkonfigurationen von ApexChart cards als entity einfach die Bezeichnung meines Sensors einzusetzen. Dann erscheinen zwar Balken anstatt einer Linie, aber mit falschen Werten. Ich denke, dass ich zusätzlich ein Script-Snippet für data_generator: > einsetzen muss, habe aber keine Ahnung, wie es aussehen muss.
 
Nach einiger Recherche ist es mir gelungen, ein Kombi-Diagramm mit Linie und Balken aus zwei Sensoren zu erstellen. Für den Bug beim Balkendiagramm in ApexChart cards wurde im September auf github ein bug issue aufgemacht. Der Fehler ist aber wohl noch nicht beseitigt.
 
Wenn ich deinen Code nehme und durch meinen Sensor ersetze und type: auf column setze, erhalte ich das.
1736886135680.png
Ein klares Balkendiagram, da friert nix ein.
 

Zurzeit aktive Besucher

Letzte Anleitungen

Statistik des Forums

Themen
6.061
Beiträge
58.927
Mitglieder
6.081
Neuestes Mitglied
Opa Ingo
Zurück
Oben