Feature Request: Stacked bar chart

[michaelblight]

I'm plotting CPU usage of my 12 Docker containers, which are percentages. It would therefore be really useful to stack the graphs so the overall CPU usage would also be shown. The alternative is to fudge it by keeping a running total myself (ie. the last container's CPU is a sum of it and all the previous), but then you can't see valid values for each data point.

[kalkih]

Interesting idea, you mean something like this?

Might be a bit out of scope / too advanced for this mini graph project, but definitely a cool and useful feature.

You could create a template sensor to easily get the total or checkout systemmonitor, and then show it in a seperate graph. Not an ideal solution but works.

[michaelblight]

Yes, that's it. I was hoping it wouldn't be too hard on the assumption that the underlying graph was a component you were using rather than one you wrote. I was going to try my own fudge - the main downside is hovering over one of the graphs will show you the cumulative total, not it's actual value.

[bdr99]

This would be great for power consumption graphs. By stacking the lines, it would be possible to see both the total power consumption as well as how much each individual device is contributing to the total.

Something like this:

[alexswart]

this is what i am looking for to stack 2 value's in 1 bar is there a solution to show it? i want see my energy peak and off peak in 1 bar with 2 different collors

[firstof9]

Would it be possible to do a mode like this image but vertical?

[da-anda]

I would also love to see some sort of stacking feature. Like basically creating a new virtual entity in which you define the aggregate_func to your liking, like sum for stacked stuff, and it is aggregating the data from all other entities.

[rednasss]

I would also love to see the stacking feature, both for line graphs and bar graphs! Is there a possibility this will be added in the (near) future? Thanks in advance and I really like using these cards!

[Toukite]

Hello, I would also like to have this stacking feature !

[ohipe]

hi @kalkih do you have any update on this? is it on your roadmap? thanks for your work it is amazing!

[Stefan4810]

?

[RomRider]

Unlikely to happen in mini-graph-card however this feature is available in apexcharts-card now: https://github.com/RomRider/apexcharts-card

We'll keep this one mini and the other one will have more advanced features.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!

[MayeulC]

Edit: I wrote this before reading the comment mentioning apexcharts

Could this be reopened? I am very much interested in such a feature myself.

I have sensors for individual devices' power consumption, as well as total power. It would be nice to have total power in the background, and individual devices stacked in the foreground.

Since individual devices usually have similar power ratings (~30W), they can be hard to distinguish. Such a graph would also tell me at a glance how much power is unaccounted for.

Having both stacked line and bar plots would be nice. It would also be nice to have finer control of multiple bars:

• draw them on top of one another, if we know that one value is necessarily less than the other.
• Draw them on the opposite side, like HA does on the energy panel for produced/consumed, or as highlighted here in https://github.com/kalkih/mini-graph-card/issues/79#issuecomment-607581966 with the demography plot

After some thinking, I think some properties could be provided

• group-with, to "tag" groups to put in the same column (and stack)
• position: to control if the bar should be stacked or absolute (from 0), and inverted (versus plot)

Multiple groups could be combined to form a bar spanning multiple columns (optionnal). The position attribute could be applied to line plots as well.

I can see something like:

type: custom:mini-graph-card
name: Energy
icon: mdi:lightning-bolt-outline
hours_to_show: 168
bar_spacing: 8
group_by: date
aggregate_func: diff
smoothing: false
entities:
  - entity: sensor.home_total_energy
    name: total
    position: absolute
    group-with: mygroup
  - entity: sensor.server_smart_plug_total_energy
    name: server
    group-with: mygroup
    stack-order: 1 # Not sure that property is necessary, stack them as specified?
  - entity: sensor.fridge_kettle_total_energy
    name: fridge and kettle
    position: stacked
    group-with: mygroup
    stack-order: auto # Although it would be nice to have finer control: usually put the "baseload" at the bottm
show:
  graph: bar

Output:

Or separate them

entities:
  - entity: sensor.home_total_energy
    name: total
    position: absolute
    group-with: myothergroupalone
  - entity: sensor.server_smart_plug_total_energy
    name: server
    group-with: mygroup
  - entity: sensor.fridge_kettle_total_energy
    name: fridge and kettle
    position: stacked
    group-with: mygroup

Output:

---

"Versus plot":

entities:
  - entity: sensor.total_power_received
    group-with: totalpower
  - entity: sensor.total_power_sent
    group-with: totalpower
    position: inverted

"Versus plot":

entities:
  - entity: sensor.total_power_produced
    group-with: powerbalance
    position: inverted
  - entity: sensor.total_power_received
    group-with: [powerbalance,powerusage]
  - entity: sensor.server_power_usage
    group-with: powerusage
    position: [stacked,inverted]
  - entity: sensor.server_power_usage
    group-with: powerusage
    position: [stacked,inverted]

Output:

---

Same example, different groups for the top bar, and do not invert bottom

entities:
  - entity: sensor.total_power_produced
    group-with: powerbalance
    position: inverted
  - entity: sensor.total_power_received
    group-with: powerbalance
  - entity: sensor.server_power_usage
    group-with: powerusage
    position: stacked
  - entity: sensor.server_power_usage
    group-with: powerusage
    position: stacked

Output:

[stale[bot]]

Still an active issue, got it! Removing stale label.