Stacked bar graph

nick2k3 · October 3, 2022, 11:39am

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 · October 4, 2022, 7:06am

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

_Dani · November 18, 2022, 9:25am

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 · November 18, 2022, 10:00am

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

With stacked: true:

stefan1982 · January 13, 2023, 8:15am

@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 · January 13, 2023, 12:12pm

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 · January 13, 2023, 12:46pm

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 · January 16, 2023, 6:26am

Thank you! Very informative…

uowis · May 2, 2023, 9:59am

Somoene have an idea to have this result :

Christoph_D · September 22, 2023, 9:18am

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 · November 17, 2023, 8:55am

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

LeedsDBA · November 19, 2023, 4:53pm

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 · December 12, 2023, 10:30am

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

footswitch · January 6, 2025, 2:51am

I tried with the transform option but couldn’t get the sensor data from the same time period as the entity.
The transform option only gets the current value of the sensor, and not its historic value.

series:
  - entity: ...
    transform: "return x + hass.states['sensor.other_entity'].state;"

footswitch · January 8, 2025, 12:30pm

I have some of it working accidentally. Honestly I’m not understanding how I got here.
What we have here is the bars:

overlapped - in front of each other, but also the smaller bars are stacked in front of the bigger bar.

instead of:

stacked - on top of each other

Running on the latest everything - HA Core 2025.1.1 + apexcharts-card 2.1.2

The last bar is made of: 132-Total = 34.3 (it’s in the back, and matches the y axis = 34.3), then these two: 132-BC=8.5, and 132-WB=21.1 (these two are stacked on top of each other).
This works for me because the first value is the house total consumption (it’s always the largest value), and the others are portions of it (household appliances).
But how is it “guessing” that I want the first bar below, and the others stacked over it?

But I still have two other issues with this configuration:

The y max auto scaling is being calculated as the sum of all entities stacked, instead of the max value among all the entities.
This is where I’m lost - the only way I could stack the first group H100, is by naming its entities the same. If I change the name, they become stacked. However, the second group is working with different names.

type: custom:apexcharts-card
graph_span: 7d
update_interval: 5m
stacked: true
header:
  show: true
  title: Daily - last week
apex_config:
  xaxis:
    labels:
      format: ddd
  tooltip:
    enabled: true
    x:
      format: dd-MMM-yyyy
      show: false
series:
  - entity: sensor.house_100_energy_input
    name: H100
    type: column
    stack_group: house100
    color: MediumAquamarine
    statistics:
      type: change
      period: day
    show:
      legend_value: false
  - entity: sensor.heat_pump_energy
    name: H100
    type: column
    stack_group: house100
    color: Teal
    statistics:
      type: change
      period: day
    show:
      legend_value: false
  - entity: sensor.house_132_energy_input
    name: 132-Total
    type: column
    stack_group: house132
    color: CornflowerBlue
    statistics:
      type: change
      period: day
    show:
      legend_value: false
  - entity: sensor.house132heatpump_ch1_energy
    name: 132-BC
    type: column
    stack_group: house132
    color: SandyBrown
    statistics:
      type: change
      period: day
    show:
      legend_value: false
  - entity: sensor.house132wallbox_rc_ch1_energy
    name: 132-WB
    type: column
    stack_group: house132
    color: GreenYellow
    statistics:
      type: change
      period: day
    show:
      legend_value: false