stacked bar-chart like senec-chart

[eiderterra]

Hello,
I have the following chart:

type: custom:plotly-graph
entities:
  - entity: sensor.erzeugung_tag
    texttemplate: "%{y:.2f}"
    textfont:
      size: 12
      color: "#000000"
    name: Erzeugung
    type: bar
    statistic: state
    period: day
    marker:
      color: "#4169E1"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.erzeugung_tag'].state],
          })
  - entity: sensor.verbrauch_tag
    texttemplate: "%{y:.2f}"
    textfont:
      size: 12
      color: "#000000"
    name: Verbrauch
    type: bar
    statistic: state
    period: day
    marker:
      color: "#CAD97D"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.verbrauch_tag'].state],
          })
  - entity: sensor.netzbezug_tag
    texttemplate: "%{y:.2f}"
    textfont:
      size: 12
      color: "#000000"
    name: Bezug
    type: bar
    statistic: state
    period: day
    stackgroup: 1
    marker:
      color: "#EE7A06"
      opacity: 0.9
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.netzbezug_tag'].state],
          })
  - entity: sensor.netzeinspeisung_tag
    texttemplate: "%{y:.2f}"
    textfont:
      size: 12
      color: "#000000"
    name: Netzeinspeisung
    type: bar
    statistic: state
    period: day
    marker:
      color: "#CD5C5C"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.netzeinspeisung_tag'].state],
          })
  - entity: sensor.akku_beladung_tag
    texttemplate: "%{y:.2f}"
    textfont:
      size: 12
      color: "#000000"
    name: Akku Beladung
    type: bar
    statistic: state
    period: day
    marker:
      color: "#AAE1FC"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.akku_beladung_tag'].state],
          })
  - entity: sensor.akku_entladung_tag
    texttemplate: "%{y:.2f}"
    textfont:
      size: 13
      color: "#000000"
    name: Akku Entladung
    type: bar
    statistic: state
    stackgroup: 1
    period: day
    marker:
      color: "#6C9BC4"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.akku_entladung_tag'].state],
          })
layout:
  paper_bgcolor: rgba(0,0,0,0)
  plot_bgcolor: rgba(0,0,0,0)
  barmode: null
  bargap: 0.2
  uniformtext:
    minsize: 12
    mode: show
  modebar:
    orientation: h
    remove: pan
  margin:
    t: 25
    l: 30
    r: 30
  height: 500
  legend:
    "y": -0.25
    x: 0.02
  xaxis:
    rangeselector:
      "y": 1.15
      buttons:
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 10
          step: day
        - count: 30
          step: day
    gridcolor: rgba(238,235,235,0.3)
    autorange: true
    showgrid: true
    linewidth: 0
    linecolor: null
    nticks: 6
    tickformat: |-
      %d %b
      %Y
  yaxis:
    visible: true
    autorange: true
hours_to_show: 5d
refresh_interval: 5
title: Speicher - kWh täglich
card_mod:
  style: |
    ha-card {
        border-width: 0px;
       }
view_layout:
  position: main

I would like to stack the graphs so that it looks similar to the Senec diagram like thies:

I would be very grateful if someone could help me.

[dbuezas]

See:

• https://plotly.com/javascript/bar-charts/#stacked-bar-chart
• https://plotly.com/javascript/bar-charts/#grouped-bar-chart

[eiderterra]

Thank you for your answer,
I have already read there, but unfortunately I don't understand how I could insert this into my code,
stack: I understand
group: is default
how do I get 2 stacked columns?
I am too inexperienced for that

[dbuezas]

ok, I didn't manage either :(

[dbuezas]

Oh, I have an idea:

type: custom:plotly-graph
layout:
  barmode: stack
defaults:
  entity:
    period: day
    type: bar
    filters:
      - filter: i>0

entities:
  - entity: sensor.outside_temperature
  - entity: sensor.flur_thermometer_temperature
  - entity: sensor.keller_temperature
    time_offset: 6h # this modifier is specific to this card. By shifting the time, plotly creates a new stack
  - entity: sensor.kitchen_thermometer_temperature
    time_offset: 6h
hours_to_show: 10d

[eiderterra]

Thank you very much for this tip, I was able to solve my problem and would like to show it to everyone, maybe someone can use it.

here the code:

type: custom:plotly-graph
defaults:
  yaxes:
    fixedrange: true
  entity:
    period: day
    type: bar
    statistic: state
    texttemplate: "%{y:.1f}"
    textposition: auto
entities:
  - entity: sensor.erzeugung_tag
    name: Erzeugung
    marker:
      color: "#4169E1"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.erzeugung_tag'].state],
          })
  - entity: sensor.akku_entladung_tag
    name: Akku Entladung
    marker:
      color: "#6C9BC4"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.akku_entladung_tag'].state],
          })
  - entity: sensor.netzbezug_tag
    name: Bezug
    marker:
      color: "#EE7A06"
      opacity: 0.9
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(0,0,0)],
            ys: [...ys, hass.states['sensor.netzbezug_tag'].state],
          })
  - entity: sensor.verbrauch_tag
    name: Verbrauch
    marker:
      color: "#CAD97D"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(6,0,0)],
            ys: [...ys, hass.states['sensor.verbrauch_tag'].state],
          })
    time_offset: 6h
  - entity: sensor.akku_beladung_tag
    name: Akku Beladung
    marker:
      color: "#AAE1FC"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(6,0,0)],
            ys: [...ys, hass.states['sensor.akku_beladung_tag'].state],
          })
    time_offset: 6h
  - entity: sensor.netzeinspeisung_tag
    name: Netzeinspeisung
    marker:
      color: "#CD5C5C"
      opacity: 2
    filters:
      - filter: i>0 && i < xs.length - 1
      - fn: |
          ({ys,xs,hass}) => ({
            xs: [...xs, new Date().setHours(6,0,0)],
            ys: [...ys, hass.states['sensor.netzeinspeisung_tag'].state],
          })
    time_offset: 6h
layout:
  paper_bgcolor: rgba(0,0,0,0)
  plot_bgcolor: rgba(0,0,0,0)
  barmode: stack
  bargap: 0.2
  uniformtext:
    minsize: 10
    mode: show
  modebar:
    orientation: v
    remove: zoom
  margin:
    t: 25
    l: 30
    r: 30
  height: 500
  legend:
    "y": -0.25
    x: 0.02
  xaxis:
    rangeselector:
      "y": 1.15
      buttons:
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 10
          step: day
        - count: 30
          step: day
    gridcolor: rgba(238,235,235,0.3)
    autorange: true
    showgrid: true
    linewidth: 0
    linecolor: null
    nticks: 7
    tickformat: |-
      %d %b
      %Y
  yaxis:
    visible: true
    autorange: true
hours_to_show: 7d
refresh_interval: 5
title: Energiedaten
card_mod:
  style: |
    ha-card {
        border-width: 0px;
       }
view_layout:
  position: main

should i post the solution at show and tell?

[dbuezas]

Thanks for the update. If you want to also have the last known values in the legend or in separate (bigger) indicator widgets, you may find this useful:

• Any way to write last values in the card? (not as legend) #364
• https://github.com/dbuezas/lovelace-plotly-graph-card?tab=readme-ov-file#universal-functions

[AndreiLux]

I was looking for something similar, the above workaround should ago away whenever we upgrade to new Plotly.js 3.0.0 with support for barmode: group + offsetgroup: x.

https://plotly.com/python/bar-charts/ "Grouped Stacked Bar Chart"