Stacked surface areas on y-axis

[fpdragon]

Hi,

I have a diagram with different power consumptions and it shows up correctly as different lines in one graph.

However, what I am trying to get is a stacket surface graph that each device consumption is stacked up to that one before.
In the end, the maximum value shall be the sum of all devices.

Here is what I currently have:

type: custom:plotly-graph
entities:
  - entity: sensor.da_wp_power_gesamt
    name: Wärmepume
  - entity: sensor.xx_konvektoren_energy_power
    name: Konvektoren
  - entity: sensor.ke_boiler_energy_power
    name: E-Boiler
  - entity: sensor.ku_kuhlschrank_energy_power
    name: Kühlschrank
  - entity: sensor.ku_kochplatte_energy_power
    name: Kochplatte
  - entity: sensor.ku_mikrowelle_energy_power
    name: Mikrowelle
  - entity: sensor.ku_geschirrspuler_energy_power
    name: Geschirrspüler
  - entity: sensor.ke_power_gesamt
    name: Gesamttrend
    line:
      color: yellow
      dash: dot
      width: 2
    filters:
      - sliding_window_moving_average:
          window_size: 700
          extended: false
          centered: true
hours_to_show: 48
refresh_interval: 10
title: Power Details

I found that there is this attribute called stackgroup in some plotly examples.

Given to this example

var plotDiv = document.getElementById('plot');
var traces = [
	{x: [1,2,3], y: [2,1,4], stackgroup: 'one'},
	{x: [1,2,3], y: [1,1,2], stackgroup: 'one'},
	{x: [1,2,3], y: [3,0,2], stackgroup: 'one'}
];

Plotly.newPlot('myDiv', traces, {title: 'stacked and filled line chart'});

it should do the trick as shown:

However I was not able to adopt this to my code.
I changed for example:

entities:
  - entity: sensor.da_wp_power_gesamt
    name: Wärmepume
    stackgroup: 'one'
  - entity: sensor.xx_konvektoren_energy_power
    name: Konvektoren
    stackgroup: 'one'

And the lines are changing to be shown with a surface below.
However, "Konvektoren" is not added on top of "Wärmepumpe" which would be the behavior I am wishing. "Konvektoren" is still measured from the 0 of the y axis.
So it seems that the signal word "stackgroup" is known but the two entitys may have no relationship to each othe? I don't know.

Any ideas?

[fpdragon]

defaults:
  entity:
    filters:
      - resample: 1m

... has done the trick.

Here is my solution:

type: custom:plotly-graph
entities:
  - entity: sensor.xx_verbrauch_power_rest
    name: Rest
    fillcolor: gray
  - entity: sensor.ku_kuhlschrank_energy_power
    name: Kühlschrank
    fillcolor: blue
  - entity: sensor.ku_geschirrspuler_energy_power
    name: Geschirrspüler
    fillcolor: orange
  - entity: sensor.ku_mikrowelle_energy_power
    name: Mikrowelle
    fillcolor: blueviolet
  - entity: sensor.ku_kochplatte_energy_power
    name: Kochplatte
    fillcolor: aqua
  - entity: sensor.ke_boiler_energy_power
    name: E-Boiler
    fillcolor: red
  - entity: sensor.xx_konvektoren_energy_power
    name: Konvektoren
    fillcolor: SaddleBrown
  - entity: sensor.da_wp_power_gesamt
    name: Wärmepume
    fillcolor: YellowGreen
  - entity: sensor.ke_power_gesamt
    name: Gesamttrend
    line:
      color: white
      dash: dot
      width: 2
    filters:
      - sliding_window_moving_average:
          window_size: 300
          extended: false
          centered: true
    stackgroup: null
    fill: null
hours_to_show: 48
refresh_interval: 10
title: Power Details
defaults:
  entity:
    filters:
      - resample: 1m
    line:
      width: 0
    stackgroup: one
  yaxes:
    fixedrange: true
fn: |
  $fn({getFromConfig, vars})=> {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    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": [Date.now()-1000*60*60*h, Date.now()],
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -.5)
        - $fn({vars}) => vars.scroll( '>', .5)
      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*30)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '2d', 24*2)
        - $fn({vars}) => vars.zoom( '1d', 24)
        - $fn({vars}) => vars.zoom( '1h', 1)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 0
      xanchor: left
      'y': 1
      yanchor: top
  height: 350
  yaxis:
    side: left

[dbuezas]

Exactly. For stackgroup to work, the x value of each trace (entity) need to match exactly. This will only work with statistics or with the resample filter