Stacked bar graph

[nick2k3]

Hello,
I am trying to find a way to have a graph in a form of “stacked” bars or lines to represent how each sensor contributes to the overall value.

A tipical use case is this:
1 - one sensor representing the consumption from the grid
2 - one or more sensor representing the various appliances
3 - one template sensor that represent “other” obtained by doing 1-2

I would be able to graph the sensors 2(one for each appliance) and 3 in a stacked form:

or:

Is there any way to obtain this with an existing card? or with a 3rd party one?

Thanks

[ondras12345 (Ondra)]

I’m pretty sure apexcharts-card can do it with stacked: true.

ApexCharts card - A highly customizable graph card

Hi folks, I’ve built a new card to display some graphs in Lovelace . It is in its early stage and is not meant to replace the mini-graph-card at all. It gives some new possibilities to display data in Home-Assistant and has some extensive customizability. It is based on ApexChartsJS, and you’ll find all kind of examples of what you could build over here [Image] Usage stable releases documentation can be found here beta/dev releases documentation ca…

[_Dani (Dani Estermann)]

Unfortunately not.

Stacked: true only causes separated graphs to be shown on the same graph. But the entities are not stacked into one bar or curve. They are still shown as separate bars (besides each other).

[ondras12345 (Ondra)]

It seems to stack entities into a single bar.
Without stacked: true:

With stacked: true:

[stefan1982 (Stefan)]

@onstra12345 Could you please share your code, how you managed to have stacked the bars using multiple entities?
I’m trying and trying, but I’m unable to get it to work unfortunatly.

[ondras12345 (Ondra)]

A simple example:

type: custom:apexcharts-card
graph_span: 7d
stacked: true

series:
  - entity: sensor.kotlik_gas_flow_heating_integral
    type: column
    group_by:
      func: diff
      duration: 1d
      start_with_last: true
  - entity: sensor.kotlik_gas_flow_dhw_integral
    type: column
    group_by:
      func: diff
      duration: 1d
      start_with_last: true

[4331525 (300tang)]

type: custom:apexcharts-card
apex_config:
  chart:
    stacked: true
  xaxis:
    labels:
      format: dd
  legend:
    show: false
graph_span: 7d1s
span:
  end: day
show:
  last_updated: false
header:
  show: true
  show_states: true
  colorize_states: true
  title: 每月流量
series:
  - entity: sensor.sensor2me_4gcard1
    name: 特斯拉4G卡流量
    type: column
    unit: ' MB'
    color: darkviolet
    group_by:
      func: max
      duration: 1d
    show:
      datalabels: true
  - entity: sensor.sensor2me_4gcard2
    name: 车库4G卡流量
    type: column
    unit: ' MB'
    color: orangered
    group_by:
      func: max
      duration: 1d
    show:
      datalabels: true
style: |
  ha-card {border-radius: 29px; border: 0.2px solid teal }

[stefan1982 (Stefan)]

Thank you! Very informative…

[uowis]

Somoene have an idea to have this result :

JavaScript Grouped & Stacked Column Chart – ApexCharts.js