Stacked line charts broken in 2.1.2

[marcelhoogantink]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser
• [x] I verified that I'm really running the lastest version in my browser console
• [x] 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 https://github.com/RomRider/apexcharts-card/issues/728#issuecomment-2222610262, 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 https://github.com/RomRider/apexcharts-card/issues/728#issuecomment-2222610262

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

```yaml 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: ✇❄ ```