Stacked line charts broken in 2.1.2

[marcelhoogantink]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser
• I verified that I'm really running the lastest version in my browser console
• I checked if there is another issue opened with the same problem

Describe the bug
option stacked: true does not work anymore in 2.1.2, it's OK in 2.0.4

Version of the card
Version: 2.1.2

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 10d
show:
  last_updated: true
stacked: true
header:
  standard_format: false
  show: true
  show_states: true
  colorize_states: true
  title: test apex graph
all_series_config:
  stroke_width: 1
  type: area
  curve: stepline
  opacity: 1
  statistics:
    type: mean
series:
  - entity: sensor.hass_db_states
  - entity: sensor.hass_db_attributes
  - entity: sensor.hass_db_events
  - entity: sensor.hass_db_statistics
  - entity: sensor.hass_db_size
    type: line
    stroke_width: 2
yaxis:
  - min: 0
    max: 1500

Screenshots
Version 2.0.4 is OK:

Version 2.1.2 is wrong:

Expected behavior
Graph should be stacked also in 2.1.2

Desktop (please complete the following information):

• Browser [e.g. chrome, safari] Any
• Version [e.g. 22] ANy

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] Any
• OS: [e.g. iOS8.1] Any
• Browser [e.g. stock browser, safari] Any
• Version [e.g. 22] Any

Additional context

[paulius2k]

Same for type: column chart:

[jarube]

Same for type: column chart:

Same here!

[RomRider]

Until I fix it in the code, you can fix it with:

apex_config:
  chart:
    stackOnlyBar: false

[marcelhoogantink]

Until I fix it in the code, you can fix it with:

apex_config:
  chart:
    stackOnlyBar: false

Thanks for your reply, I tried it, but it did not work:

rolled back to 2.0.4.

[jarube]

Until I fix it in the code, you can fix it with:

apex_config:
  chart:
    stackOnlyBar: false

sorry, this doesn't work me either

[del13r]

Same issue here

2.0.4

2.1.0 and 2.1.2

Code

card:
  type: custom:apexcharts-card
  stacked: true
  graph_span: 1d
  span:
    offset: ${offset}
  header:
    show: false
    title: Total Power
  series:
    - entity: sensor.power_production
      type: column
      name: Produced
      color: '#01B4DE'
      group_by:
        func: avg
        duration: 5min
    - entity: sensor.power_consumption
      transform: return x *-1 ;
      type: column
      name: Consumed
      color: '#F37320'
      group_by:
        func: avg
        duration: 5min
    - entity: sensor.power_net
      type: column
      name: Imported(+)/Exported(-)
      color: '#545456'
      group_by:
        func: avg
        duration: 5min
  yaxis:
    - min: -7000
      max: 7000
      decimals: 0

[paulius2k]

The strange thing for me is that I can't even make it work again by rolling back to v2.0.4.

[wejto]

As I replied in #728 (comment), it works in a newer version when you delete the y-axis block in yaml but this workaround is not possible to use every time. At least rolling back to 2.0.4 worked for me well.

[del13r]

The strange thing for me is that I can't even make it work again by rolling back to v2.0.4.

I found that I was being impatient with the download button and had to wait a few seconds before pressing the download button.
You can confirm what version you have by doing this in the terminal

cat /homeassistant/www/community/apexcharts-card/apexcharts-card.js | grep -o v2.0.4
v2.0.4

[paulius2k]

I do have 2.0.4 now:

➜  ~ cat /homeassistant/www/community/apexcharts-card/apexcharts-card.js | grep -o v2.0.4
v2.0.4

[del13r]

I found that removing the yaxis: block made the stacking work again with the newer versions 2.1.0 onwards.

Originally posted by @wejto in #728 (comment)

Obviously the yaxis block is desired by me for setting the graph scale and how many decimal points i prefer to display, so removing the yaxis block is a regrettable solution for me.

[RichardRamshaw]

Until I fix it in the code, you can fix it with:

apex_config:
  chart:
    stackOnlyBar: false

This did work for me, added near the top, not sure if it's not working for others as it was added at the bottom?

[wejto]

Until I fix it in the code, you can fix it with:

apex_config:
  chart:
    stackOnlyBar: false

This did work for me, added near the top, not sure if it's not working for others as it was added at the bottom?

Tried this on multiple different rows with no difference unfortunately.

[alexeiw123]

Ah - I spent ages figuring out the brush feature and was thinking "gee, I've really nailed this view!" - then I saw that my stacked area graph had broken. First up, I thought it must have been some change I'd made when implementing brush.

So after finding this issue, I see that there's a bug using stacked. So this is where it gets interesting for me. With the same code, if I roll back to v2.0.4, this is what I get:

This actually does seem related to using brush because if I make this change:

  experimental:
    brush: false

Then my stacked graph shows correctly - just no interactivity. (I've also changed the span just to help show detail int he screenshot)

So i don't know if these bugs are related. Does brush clash with [stacked](stacked: true)? Will fixing this stacked issue also solve the display issues when brush is enabled?

[man010]

Removing the yaxis block works as a workaround… but this is not a viable solution in the end

[Cellivar]

I was able to work around this by moving the y-axis config into the apex_charts section..

Click here to expand the config

type: custom:apexcharts-card
apex_config:
  yaxis:
  - show: true
    decimalsInFloat: false
    opposite: true
    min: 0
    stepSize: 100
    seriesName: '🏠'
  - seriesName: '🏠'
    show: false
  chart:
    stackOnlyBar: false
    height: 600px
    type: area
  legend:
    width: 100%
    inverseOrder: true
    position: bottom
    itemMargin:
      horizontal: 15
      vertical: 5
    markers:
      radius: 1
      height: 14
      width: 6
      offsetY: 4
stacked: true
cache: false
graph_span: 30m
update_interval: 30s
header:
  floating: true
  show: true
  show_states: true
all_series_config:
  stroke_width: 1
  opacity: 1
  type: area
  float_precision: 0
  show:
    in_header: false
  fill_raw: last
  group_by:
    func: max
    duration: 1m
series:
  - entity: sensor.eagle_200_meter_power_demand
    type: line
    stroke_width: 2
    color: '#A55'
    name: '🏠'
    yaxis_id: '1'
    show:
      legend_value: false
      in_header: raw
      extremas: true
  - entity: sensor.all_standby_power
    name: '💤'
  - entity: sensor.nelson_energy_power
    name: 🐁⚡
  - entity: sensor.fraser_energy_power
    name: 🦊⚡
  - entity: sensor.rhine_energy_power
    name: 🌿🐱⚡
  - entity: sensor.thelon_energy_power
    name: 🛜
  - entity: sensor.shelly_rubicon_power
    name: 📺
  - entity: sensor.shelly_orinoco_power
    name: 🛠️
  - entity: sensor.all_lights_power
    name: 💡
  - entity: sensor.yangtzeekiang_energy_power
    name: 🍔❄
  - entity: sensor.colorado_energy_power
    name: 💦👕
  - entity: sensor.riogrande_energy_power
    name: 💦🍽️
  - entity: sensor.evse_dryer_total_power
    name: 🚓
  - entity: sensor.fan_power
    name: ✇❄

[paulius2k]

@RomRider any chances of fixing this one, please?

[MCBrakel]

+1 on this issue, working with v2.0.4 now.

[del13r]

I modified my code and it now works with stacked on v2.1.2

card:
  type: custom:apexcharts-card
  stacked: true
  apex_config:
    yaxis:
      min: -7
      max: 7

[scop]

I found that a workaround that works for me with yaxis present is to add stack_groups to all series that should be stacked. (With no yaxis, no stack_groups needed either.) #827

[man010]

I found that a workaround that works for me with yaxis present is to add stack_groups to all series that should be stacked. (With no yaxis, no stack_groups needed either.) #827

Thanks so much ! That worked fine !

[marcelhoogantink]

Until I fix it in the code ...

@RomRider
Any chance that this will be solved soon?