Apexcharts Graphs shifted

Configuration Frontend
1

Hello together, i use Apexcharts to display the composition of our homes energy usage. However when i exit the edit-mode of the dashboard, the Graph breaks.

It is supposed to look like this:
[am only alllowed to post one picture so immagine a nice stacked area graph]

But it instead looks like this:

grafik
grafik1685×678 107 KB

When i look at the browser console apex charts throws a lot of Errors and warnings.

Clearing my Browser cache also doesnt help unfortunatly.

Any help or any hints would be greatly appreachiated as i cant seem to find any alternatives to apex charts, which provide a stacked area graph.

2

Impossible to tell as you don’t show how you configured your chart. However searching for the term “stacked” in the docs for the card produces results.

3

This is my current config of the card:

type: custom:apexcharts-card
graph_span: 1d
apex_config:
  chart:
    stacked: true
    stackOnlyBar: false
header:
  show: true
  title: Energiezusammensetzung
  show_states: true
  colorize_states: true
series:
  - entity: sensor.powerconsumedfromgrid_2
    name: Netzverbrauch
    stack_group: "1"
  - entity: sensor.powerconsumedfromproducers_2
    name: Direktverbrauch
    stack_group: "1"
  - entity: sensor.powerconsumedfromstorage_2
    name: Akku
    stack_group: "1"
  - entity: sensor.powerconsumed_2
    type: line
    stroke_width: 1
    opacity: 1
    name: Gesamtverbrauch
    stack_group: "2"
all_series_config:
  stroke_width: 1
  type: area
  unit: W
  opacity: 0.5
  group_by:
    func: avg
    duration: 10m