Stacked area or line graphs produce incorrect result.

[edwardhorsford]

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 latest version in my browser console
• [*] I checked if there is another issue opened with the same problem

Describe the bug When charting 3 series with stacked line or area, the result is incorrect. Stacked columns render correctly. My hunch is that this is related to one series being at 0 for considerable periods and the summing calculation using the previous positive value when this happens.

I have three series - each an energy monitoring plug where the series is watts over time. I'm attempting to plot an area graph with all three stacked.

Unstacked area (correct):

Stacked column (correct):

Stacked area (incorrect):

In the stacked area the blue series (UPS) is shown a hump in wattage that does not exist with usage at ~150w, then reducing to half after a while - this does not exist in the data.

Video showing a the step goes away when the fridge series is removed, even though there's no usage during that time:

Here is the blue series on its own:

Thoughts

I suspect this may be related to the fridge reading 0 for extended periods. I've tried using fill_raw with both zero and last to no effect.

My hunch is that the stacking algorithm is using last available value for a series when the current value is zero - here incorrectly adding the last value of the fridge to the totals, even though it's at 0.

I've tried also using a transform to make sure the value is always at least 1w but it did not work.

Version of the card Version: 2.04

To Reproduce This is the configuration I used:

type: custom:apexcharts-card
stacked: true
graph_span: 1d
span:
  end: hour
update_interval: 1m
apex_config:
  legend:
    position: top
    fontSize: 14px
    itemMargin:
      horizontal: 10
      vertical: 5
all_series_config:
  type: area
  unit: w
  float_precision: 2
  opacity: 0.9
  curve: stepline
  show:
    legend_value: false
  group_by:
    func: avg
    duration: 1m
series:
  - entity: sensor.fridge_power_current_consumption
    name: Fridges
  - entity: sensor.ups_power_current_consumption
    name: UPS
  - entity: sensor.desk_power_current_consumption
    name: Desk

Screenshots If applicable, add screenshots to help explain your problem.

Expected behavior The stacked area should closely resemble the stacked column.

Desktop (please complete the following information):

• Browser Chrome
• Version 120

[brettonw]

is there any update for this?

[edwardhorsford]

is there any update for this?

My hacky solution was to just use stacked column with narrow bars. But not so narrow that it slows the UI down. I suspect the bug is probably with the apex library that this card uses.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[igorsantos07]

Not stale. I can confirm using type: column "fixes" the issue.

I wonder if this could be related to inconsistent timestamps for the X axis (every series having slight different timestamps which overlap visually but not code-wise).

This could also explain why the tooltip doesn't show multiple datapoints at once.