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

[Christoph_D (Christoph)]

I would like to know this as well. I wasn’t able to acomplish it. In my case, I would like to have a stacked bar graph showing the energy usage and two line graphs on top showing the produced solar energy and the energy coming from the battery. Unfortunately the two line graphs are stacking as well.
Does anyone have a solution for this?

[atus (Alan)]

Looking to achieve the same thing as shown in the linked example.

[LeedsDBA]

So it seems it is possible in the Apex Charts documentation.

A couple of points though. Remember it’s stacked AREA, not LINE. So you need to make sure your type is set to area

Here’s how mine looks:

^^ Note in the above that the point highlighted shows the TV is using ~73W, and the Internet plug ~28W - and the axis on the left shows it to be above 90W - so that makes sense for stacked.

Smaller example:

…and here’s the YAML:

type: custom:apexcharts-card
graph_span: 1h
update_interval: 10min
apex_config:
  tooltip:
    enabled: true
    shared: true
    x:
      show: true
      format: dddd - H:mm
    fixed:
      enabled: true
      position: topRight
header:
  show: true
  title: Power
  show_states: true
  colorize_states: true
all_series_config:
  stroke_width: 2
  type: area
  unit: W
  opacity: 0.5
  group_by:
    func: avg
    duration: 1m
series:
  - entity: sensor.dish_washer_plug_current_power
  - entity: sensor.washing_machine_plug_current_power
  - entity: sensor.tv_plug_current_power
  - entity: sensor.internet_plug_current_power
stacked: true

I’ve applied AREA to all_series_config so it applies to all entities, rather than have to do it separately, which would look like the below otherwise (snippet):

series:
  - entity: sensor.dish_washer_plug_current_power
    type: area
  - entity: sensor.washing_machine_plug_current_power
    type: area
  - entity: sensor.tv_plug_current_power
    type: area
  - entity: sensor.internet_plug_current_power
    type: area

[ha-username]

I’m looking for a slightly more complicated example. Two stacked additive areas, one substractive area and one non-stacked line, all into the same chart. Does anyone know if this is possible?

stacked+: inverter0_battery_voltage * inverter0_battery_charging_current
stacked-: inverter0_battery_voltage * inverter0_battery_discharge_current
stacked: inverter0_ac_output_apparent_power
line: inverter0_pv_charging_power