stacked bars with negative values

[GeoBau]

I want to stack the bars with the positive entities on one side and the negative emtities stacked below the 0-line

with my code the negative values are stacked after the positive entities:

how can I change that? Thanks
that is my code:

type: custom:plotly-graph
entities:
  - entity: sensor.tasmota_import_daily_energy
    name: Netz
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: crimson
  - entity: sensor.sm_daily_blau
    name: PV
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: lightblue
  - entity: sensor.sm_daily_gelb
    name: PV-Überschuss
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: gold
  - entity: sensor.sm_daily_orange
    name: Batt.laden
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: "orange"
hours_to_show: 5d
refresh_interval: auto
autorange_after_scroll: true
ticklabeloverflow: allow
layout:
  barmode: stack
  xaxis:
    tickformat: "%d %m"
    hoverformat: "%d %m"
    autorange: true
  yaxis:
    autorange: true
    griddash: dot
    overlaying: false
    visible: true
    showgrid: true
defaults:
  yaxes:
    fixedrange: true

[dbuezas]

Have you tried reordering the entities in the yaml? This may work if you know that some of the entities always have negative amounts and others always positive.

If that is not the case, then I don't think this can be done, but you can still google "how to xxxx in plotlyjs"

[GeoBau]

Reorder does not solve it. Then the + entities start on the last - entity (and not at 0.).

[GeoBau]

The solution is:
barmode: relative
then it works fine...

[dbuezas]

Try with this to get rid of the issue with the first bar. This happens because home assistant invents a data point at the start of the requested interval with the last value before the starting range.
It will also make the bars' width consistent

filters:
     - filter: "i>1"

[GeoBau]

good tip! thanks

[eiderterra]

Hello GeoBau,
can you please publish your solution as code, I would like to create a similar diagram with 4 entities, stacking 2 entities at a time, thank you.
Greetings

[GeoBau]

That is my code I hope it helps !

type: custom:plotly-graph
view_layout:
  grid-area: plotly2
entities:
  - entity: sensor.tasmota_import_daily_energy
    name: Netz
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: crimson
    filters:
      - filter: i>1
  - entity: sensor.sm_daily_blau
    name: PV-Beitrag-Verbrauch
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: lightblue
  - entity: sensor.sm_daily_orange
    name: Batt.laden
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: orange
  - entity: sensor.sm_daily_gelb
    name: PVall-Batt.Laden
    unit_of_measurement: kWh
    texttemplate: " %{y:.1f}"
    type: bar
    statistic: state
    period: day
    marker:
      color: gold
hours_to_show: 9d
refresh_interval: 10
ticklabeloverflow: allow
config:
  displayModeBar: false
  scrollZoom: false
layout:
  hovermode: false
  barmode: relative
  height: 500
  xaxis:
    tickformat: "%d %m"
    hoverformat: "%d %m"
    autorange: true
  yaxis:
    autorange: true
    griddash: dot
    overlaying: false
    visible: true
    showgrid: true
defaults:
  yaxes:
    fixedrange: true

[eiderterra]

Thanks, i will try