ApexCharts-card "stack" doesn't stack

Hi all,
I’m trying to create a chart showing power consumption as a stacked area, that is all values are added onto eachother lite in this example: Stacked Area Chart | Area Charts

For me ApexCharts insist on drawing each area on top on the other, and I can se the contours of underlying areas through the top areas.

What am I doing wrong here?

type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
  legend:
    show: true
header:
  show: true
  title: Power Consumption
graph_span: 30min
all_series_config:
  type: area
  group_by:
    func: avg
    duration: 1min
series:
  - entity: sensor.heater_power
    name: Heater
    color: orange
  - entity: sensor.dehumidifier_power
    name: Dehumidifier
    color: red
  - entity: sensor.it_closet_power
    name: IT
    color: blue
  - entity: sensor.salongen_media_power
    name: Salongen
    color: green
  - entity: sensor.other_power
    name: Other
    color: brown

There’s an option at the root level to stack the charts.

type: custom:apexcharts-card
stacked: true
apex_config:
  legend:
    show: true

Thank, but it seems to do the same as when I place it under “apex_config”/“chart”.

I noticed now that when I look at the graph in the dashboard, it shows wrong.

image

But as soon as I start editing the dashboard, it changes:

image

clear your cache

1 Like

Btw, the bottom picture is still wrong. Some strange overlaps just before 12:45.

No change. :frowning:

Then you should write up an issue against the custom card with what your expectations of stacked should do.

I’ll do. Thanks!

Hi @ancan,

I’ve got a similar problem. Did you managed to fix it (or raise a bug)? I checked the open bugs and could see a couple on stacked charts but nothing that looked exactly like yours. Thanks.

1 Like

I just had the same issue.
I worked around it by adding (same) grouping to all entities on the chart:

    group_by:
      func: avg
      duration: 10sec

My assumption is the stacking didn’t like the entities data arriving at different times.

1 Like

I have also this bug. I cannot figure it out. What I can tell, that it is caused after update.
This is my graph when it is working, I have labels grouped by 1min interval to show them all at once - that is why I have group by in code at the first place. It works sometimes after page refresh/cache deletion. It always works in HA edit page mode.
image

When there is an update of graph data, result is missing data at the beginning.
image

type: custom:apexcharts-card
graph_span: 300m
update_interval: 1min
header:
  show: true
  title: TČ
  show_states: true
  colorize_states: true
apex_config:
  tooltip:
    enabled: true
    shared: true
  plotOptions:
    dataLabels:
      name:
        show: true
      value:
        show: true
all_series_config:
  show:
    extremas: false
series:
  - entity: sensor.tc_frekvence_kompresoru
    name: Frekvence kompresoru
    type: area
    stroke_width: 0.5
    opacity: 0.1
    color: green
    yaxis_id: watt
    group_by:
      func: avg
      duration: 1min
  - entity: sensor.tc_teplota_na_vystupu
    name: Výstupní teplota
    type: area
    stroke_width: 2
    opacity: 0.1
    color: red
    yaxis_id: watt
    group_by:
      func: avg
      duration: 1min
  - entity: sensor.tc_teplota_zpatecky
    name: Zpátečka
    type: area
    stroke_width: 2
    opacity: 0.1
    color: blue
    yaxis_id: watt
    group_by:
      func: avg
      duration: 1min

There is no workaround I could find. Trying different settings, group functions etc.

The problem does not occur when setting cache: false

In case anyone still has this problem, the solution is described in the issue for this: Stacked Area Charts Don't Stack · Issue #4132 · apexcharts/apexcharts.js · GitHub. Just add the following and it all works beautifully:

      apex_config:
        chart:
          stacked: true
          stackOnlyBar: false

I have a similar non working stack issue:

Working when only having series to be stacked in the graph.
image

type: conditional
conditions:
  - entity: sensor.energi_data_service_tomorrow_valid
    state: "False"
card:
  type: custom:config-template-card
  entities:
    - sensor.energi_data_service
  card:
    type: custom:apexcharts-card
    stacked: true
    chart_type: line
    apex_config:
      chart:
        type: area
        stacked: true
      fill:
        opacity: 0.4
      stroke:
        curve: stepline
    experimental:
      color_threshold: false
      brush: true
    brush:
      selection_span: 1h
      apex_config: null
    header:
      show: true
      title: Spot + Cerius + Energinet + Elafgift
      show_states: true
      colorize_states: true
    all_series_config:
      float_precision: 2
    now:
      label: Nu
      show: true
      color: "#ff0000"
    graph_span: 25h
    span:
      start: day
    show:
      last_updated: true
    series:
      - entity: sensor.energi_data_service
        type: area
        color: "#AD1457"
        curve: stepline
        name: Elafgift
        stack_group: test1
        show:
          in_header: false
          extremas: false
          legend_value: true
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.additional_tariffs.elafgift*100];
          });
        group_by:
          func: sum
      - entity: sensor.energi_data_service
        type: area
        color: "#FF8F00"
        curve: stepline
        name: Energinet
        stack_group: test1
        show:
          in_header: false
          extremas: false
          legend_value: false
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), (entity.attributes.tariffs.additional_tariffs.transmissions_nettarif+entity.attributes.tariffs.additional_tariffs.systemtarif)*100];
          });
        group_by:
          func: sum
      - entity: sensor.energi_data_service
        type: area
        color: "#AFB42B"
        curve: stepline
        name: Nettarif
        stack_group: test1
        show:
          in_header: false
          extremas: false
          legend_value: false
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.tariffs[index]*100];
          });
        group_by:
          func: sum
      - entity: sensor.energi_data_service_uden_afgift
        type: area
        color: "#0288D1"
        curve: stepline
        name: Spot
        stack_group: test1
        show:
          in_header: false
          extremas: false
          legend_value: false
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
          });
        group_by:
          func: sum
    yaxis:
      - min: 0
        max: 310
        decimals: 0

But if i want to add a non stacked series, (In this example ‘Total’ equals the sum of the other values.)
Not Working when adding a not stacked serie.
image

In this example ‘Total’ at 1am shown as 282 but correctly calculated as 141, as shown above!

Values are stacked anyway - any idears?

type: conditional
conditions:
  - entity: sensor.energi_data_service_tomorrow_valid
    state: "False"
card:
  type: custom:config-template-card
  entities:
    - sensor.energi_data_service
  card:
    type: custom:apexcharts-card
    chart_type: line
    apex_config:
      annotations:
        position: front
        yaxis:
          - "y": ${states['sensor.energi_data_service'].attributes.today_mean}
            y2: ${states['sensor.energi_data_service'].attributes.today_min.price}
            fillColor: "#72cf8b"
            opacity: 0.1
            strokeDashArray: 5
            borderColor: "#ff0000"
            label:
              borderColor: "#ADFF2F"
              borderWidth: 0
              borderRadius: 0
              text: ${states['sensor.energi_data_service'].attributes.today_mean}
              textAnchor: middle
              position: right
              style:
                background: transparent
                color: "#ffffff"
                fontSize: 15px
                fontWeight: 100
                fontFamily: Segoe UI
                cssClass: apexcharts-xaxis-annotation-label
      chart:
        type: area
        stacked: true
      fill:
        opacity: 0.4
      stroke:
        curve: stepline
    experimental:
      color_threshold: false
      brush: true
    brush:
      selection_span: 1m
      apex_config: null
    header:
      show: true
      title: Spot + Cerius + Energinet + Elafgift
      show_states: true
      colorize_states: true
    all_series_config:
      float_precision: 2
    now:
      label: Nu
      show: true
      color: "#ff0000"
    graph_span: 25h
    span:
      start: day
    series:
      - entity: sensor.energi_data_service
        color: "#AD1457"
        stack_group: A
        name: Elafgift
        show:
          in_header: false
          extremas: false
          legend_value: true
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.additional_tariffs.elafgift*100];
          });
        group_by:
          func: sum
      - entity: sensor.energi_data_service
        color: "#FF8F00"
        stack_group: A
        name: Energinet
        show:
          in_header: false
          extremas: false
          legend_value: false
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), (entity.attributes.tariffs.additional_tariffs.transmissions_nettarif+entity.attributes.tariffs.additional_tariffs.systemtarif)*100];
          });
        group_by:
          func: sum
      - entity: sensor.energi_data_service
        color: "#AFB42B"
        stack_group: A
        name: Nettarif
        show:
          in_header: false
          extremas: false
          legend_value: false
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.tariffs.tariffs[index]*100];
          });
        group_by:
          func: sum
      - entity: sensor.energi_data_service_uden_afgift
        color: "#0288D1"
        stack_group: A
        name: Spot
        show:
          in_header: false
          extremas: false
          legend_value: false
        stroke_width: 0
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
          });
        group_by:
          func: sum
      - entity: sensor.energi_data_service
        color: "#00ffff"
        stack_group: NotStacked
        type: line
        name: Total
        show:
          in_header: true
          extremas: true
          legend_value: true
        stroke_width: 2
        opacity: 0.1
        data_generator: |
          return entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
          });
    yaxis:
      - min: 0
        max: auto
        decimals: 0