Plotly stacked area chart rendering order

[andrzej-r]

Just wanted to mention I've filed an issue in Plotly plotly/plotly.js#6579 The red area on the left has an orange outline (perfectly reasonable considering the stacked areas are rendered bottom-up) but a better solution would be to reverse the rendering order (top-down), so that outer areas are rendered first and lines can be overshadowed by any subsequently rendered areas/lines.

I do not expect this can be worked around inside Plotly Graph Card. One solution I tried was disabling outlines entirely but, while if solves the outline rendering order issues, I found the result less readable overall (outlines do help visually delineate stacked areas).

[dbuezas]

Maybe you could map all zero values to null. That may also remove the line entirely

[andrzej-r]

Interesting idea. I tried this:

    filters:
      - map_y: 'y > 10 ? y : null'

I can see it being in effect but null is simply treated as 0 (the line is still there).

[dbuezas]

If you share your yaml, i can also look for alternatives

[andrzej-r]

Sure, I've been working on several different aspects, so there is some unnecessary code in this example. The code relies on data from my inverter - I don't know how to share these. I've included code of a simpler solar generation chart but it exhibits the exact same behaviour as a battery charge/discharge chart from the screenshot above.

type: custom:plotly-graph
title: Solar Power
hours_to_show: 24
defaults:
  entity:
    line:
      width: 1
      shape: line
    statistic: mean
    period:
      0m: 5minute
      36h: hour
      10d: day
    hovertemplate: false
entities:
  - entity: sensor.givtcp_pv_power
    showlegend: false
    statistic: max
    line:
      width: 0
    fill: tozeroy
    fillcolor: '#c0c0c020'
    hoverinfo: skip
  - entity: sensor.givtcp_solar_to_house
    name: to house
    stackgroup: stacked
    line:
      color: '#1f77b4ff'
    fillcolor: '#1f77b480'
  - entity: sensor.givtcp_solar_to_battery
    name: to battery
    stackgroup: stacked
    filters:
      - map_y: 'y > 10 ? y : null'
    line:
      color: '#2ca02cff'
    fillcolor: '#2ca02c80'
  - entity: sensor.givtcp_solar_to_grid
    name: to grid
    stackgroup: stacked
    filters:
      - map_y: 'y > 0 ? y : null'
    line:
      color: '#d62728ff'
    fillcolor: '#d6272880'
fn: |
  $fn({getFromConfig, vars}) => {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    vars.xrange = (h) => {
      let start = new Date((range[0] + range[1])/2.0);
      start.setHours(0, 0, 0, 0);
      if (h >= 24*7) start.setFullYear(start.getFullYear(), start.getMonth(), start.getDate()-start.getDay());
      if (h >= 24*30) start.setDate(1);
      if (h >= 24*365) start.setMonth(0);
      return [start.getTime(), start.getTime() + 1000*60*60*h];
    }
    vars.scroll = (label, p) => ({
      args: [
        {
          layout: {
            "xaxis.range": [range[0] + width*p, range[1] + width*p],
          }
        }, {
          transition: {
            duration: 150,
          }
        }
      ],
      label,
      method: "animate",
    })    
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {  
            "xaxis.range": vars.xrange(h),
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  hovermode: x unified
  height: 561
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -1.0)
        - $fn({vars}) => vars.scroll( '>', 1.0)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 1
      xanchor: right
      'y': 1
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*365)
        - $fn({vars}) => vars.zoom( '1m', 24*31)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1d', 24)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 0
      xanchor: left
      'y': 1
      yanchor: top
  yaxis:
    fixedrange: true
    nticks: 15
    range:
      - 0
      - 7000

[dbuezas]

Oh, wow, there is A LOT going on here! 👏 👏 👏
I played a bit with this and the only solution I see is to divide the non-zero chunks in individual traces, which is not possible with this card.
What comes closest is to not use stackedgroup and instead compute their stacked value by hand and use fill: tonexty. This means you'll also have to make hovervalues by hand too. On top of that, filling with missing data is kind of broken in plotly, so you'll have to leave both sides of the missing data as zero (irrespective of stacking).
If this works, you'll most likely end up with something too messy to understand. Therefore: congrats, you reached the limits of plotly 😁 .

[andrzej-r]

Is this solution: plotly/plotly.js#6579 (comment) of any use? Not quite sure how to apply it in the context of this card.