Stacked area graph shading is hard to see if a series contains negative values

[dagwud]

Checklist

• [ x] I updated the card to the latest version available
• [x ] I cleared the cache of my browser
• [ ] I verified that I'm really running the lastest version in my browser console — not done, as I’m running through HA Companion App. However, I installed the addon via HACS for the first time earlier today, so doubtful that I could be running an older version
• [ x] I checked if there is another issue opened with the same problem

Describe the bug With stacked area graphs, negative values cause the graph to be hard to read.

When all values are positive, the graph appears to render the first series, then the second series above it (on y axis) and so on.

However, if the value of the first series is negative then things get strange with respect to the area shading. In my case, the first series is total grid electricity consumption, which can be negative if my solar panels are pushing more power out than my house is consuming.

Specifically, the first series renders below the y=0 line (correctly) but the shading of the area extends upwards to the y=0 line. This means that subsequent series’ areas are rendered in a place that is already shaded by the first series’ negative values, causing areas where there is shading for multiple series that overlap. This leads to portions of the second/third/etc. series that are hard to read because they’re obscured by the first series’ shading.

Version of the card Version: v1.10.0

To Reproduce This is a simplified example to show the scenario, using data generators so you don’t need any specific sensor values. The screenshots attached reflect this example.

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
all_series_config:
  type: area
  curve: stepline
  stroke_width: 2
stacked: true
series:
  - entity: sensor.bedroom_geyser_consumption
    name: f(𝑥) = 1.75𝑥² - 250
    data_generator: |
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 24; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, Math.pow(1.75 * i, 2) - 250])
      }
      return data.reverse()
  - entity: sensor.kitchen_geyser_consumption
    name: f(𝑥) = 20𝑥 - 50
    data_generator: |
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 24; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, i * 20 - 50])
      }
      return data.reverse();
  - entity: sensor.bedroom_geyser_consumption
    name: f(𝑥) = 50
    data_generator: |
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 24; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, 50])
      }
      return data.reverse();

This renders three simple mathematical formulae and stacks them. I added stepline to make it easier to see the issue. Note how to the right side of the graph, the shadings for the areas overlap, and become harder to see as more areas overlap.

Screenshots Note the area from around 4pm where the overlapping shading occurs. If you look very carefully you can still see the lines from the other series, but they’re very hard to see because of the orange series’ shading.

Expected behavior If the value of a series is negative, all values in the stacked graph should still be readable. One possibility might be to have the negative value be excluded from shading, ie have it have a shaded height of 0 for all points where y < 0

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: iOS 15.1.1
• Home Assistant Companion App
• Version 2021.12.1

[dagwud]

I know I hate bug reports, so first and foremost - thank you for your hard work in integrating with Apex Charts - this is a really, really useful addon!!

[dagwud]

FYI, here’s a more complex example of the same problem with real data. This one requires specific sensor values to reproduce though, which is why I added the simplified example.

type: custom:apexcharts-card
header:
  show: true
  title: Consumption
  show_states: true
  colorize_states: true
graph_span: 12h
all_series_config:
  stroke_width: 2
  type: area
  curve: stepline
stacked: true
series:
  - entity: sensor.solarman_daily_production_active
    name: Solar Generation
    transform: return -x
  - entity: sensor.daily_bedroom_geyser_consumption
    name: Bedroom Geyser
  - entity: sensor.daily_kitchen_geyser_consumption
    name: Kitchen Geyser
  - entity: sensor.daily_pool_consumption
    name: Pool

[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.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.