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
4

I have this same issue. For whatever reason, while editing the dashboard is ok.

It seem to be related with this spike in data. If I set graph_span to a short amount of time when you don’t have a sudden spike in your sensor data, then it works ok

5

I finally found out, just leaving here as a reference. Issues is due to some of the dates series not updating due to sensor having the same value for some time. If you are in this situation, check the sensors in the graph and see which of them have periods of time without updating.

I fixed my graph adding a small random number to the sensor in Yaml, forcing it to update