Stacked Bar Card

A stacked bar card (horizontal or vertical) where each segment represents an entity's numeric value with configurable colors, gradients, and ordering.

Possible use-cases include storage usage, progress and timer bars, cpu usage, or just a pie chart that fits better into a grid themed dashboard.

Installation

HACS (recommended)

See instructions

1. Open HACS
2. Click the three dots in the top right, then 'Custom repositories'
3. Paste https://github.com/kattcrazy/Stacked-Bar-Card and select "Dashboard"
4. Search for 'Stacked Bar Card' in HACS and download
5. Reload your page!

Manual

See instructions

1. Download stacked-bar-card.js from the releases page
2. Place it in your config/www/ folder
3. Add the resource in the Lovelace config:

resources:
  - url: /local/stacked-bar-card.js
    type: module

4. Refresh your dashboard or Home Assistant if needed

Configuration

Card options

All options support Jinja templates (strings containing {{ }}).

Option	Type	Default	Description
alignment	left, center, right	left	Horizontal alignment for both title and legend
show_title	boolean	true	Show title
title	string	—	Card title text
title_position	top, bottom	top	Title placement
show_legend	boolean	true	Show legend with labels
legend_show_zero	boolean	true	Include entities with 0 value in legend
legend_position	top, bottom	bottom	Legend placement
show_state	bar, legend, both, none	legend	Where to show entity values
sort	abc, cba, highest, lowest, custom	highest	Segment order (left → right)
layout	horizontal, vertical	horizontal	Bar direction; vertical stacks bottom to top
bar_radius	number	theme	Bar segment border-radius (px); omit for theme default
gradient	none, inset, bevel, left, right, top, bottom	none	Gradient direction
fill_card	boolean	false	Remove card background; bar fills grid cell; hides title/legend
entities	array	[]	Entity list (see below)

Entity options

Option	Type	Default	Description
entity	string	required	Entity ID, Jinja template, or hardcoded number
name	string	—	Override name; omit to use friendly name. Supports Jinja.
color	string	auto	Hex (e.g. #FF0000) or HA variable. Supports Jinja.
order	number	—	Used when sort: custom. Supports Jinja.

Entities must have numeric values (from entity state or from a Jinja template in entity). Proportions are computed from the sum.

Full config & options

For your copy-paste convenience!

type: custom:stacked-bar-card

alignment: left/center/right
show_title: true/false
title: Energy Usage
title_position: top/bottom

show_legend: true/false
legend_show_zero: true/false
legend_position: top/bottom

show_state: legend/bar/both/none

sort: abc/cba/highest/lowest/custom
layout: horizontal/vertical

bar_radius: 8                # omit for theme default
gradient: none/inset/bevel/left/right/top/bottom
fill_card: true/false

entities:
  - entity: sensor.grid_usage  # Or use Jinja templating
    name: Grid
    color: '#4472C4'
    order: 1 # If using sort: custom

Examples

Communication Protocols

type: custom:stacked-bar-card
show_legend: true
show_state: legend
sort: highest
bar_height: auto
entities:
  - entity: sensor.wifi_devices # Your entity here
    name: Wifi
    color: "#7CD5FD"
  - entity: sensor.local_devices # Your entity here
    name: Local
    color: "#A2D7A4"
  - entity: sensor.z2mqtt_devices # Your entity here
    name: Z2MQTT
    color: "#FFDE7A"
legend_position: top
title_position: top
gradient: bottom
title: Protocols
grid_options:
  columns: 12
  rows: 2.5
fill_card: false
show_title: true
alignment: center
bar_radius: 13

How I got those sensors

Here's the configuration code used to get the sensors in the example above. It uses the labels assigned to devices.

template:
  - sensor:
      - name: Z2MQTT Devices
        state: "{{ label_devices('Z2MQTT') | count }}"

      - name: Local Devices
        state: "{{ label_devices('Local') | count }}"

      - name: WIFI Devices
        state: "{{ label_devices('WIFI') | count }}"

      - name: Unlabelled Devices
        state: >
          {{
            states('sensor.devices') | int
            - states('sensor.z2mqtt_devices') | int
            - states('sensor.local_devices') | int
            - states('sensor.wifi_devices') | int
          }}

Progress Bar

type: custom:stacked-bar-card
entities:
  - entity: "{{ states('sensor.percent_finished') | float }}" # Your entity here
    name: Completed
    color: '#7DD3FC'  
    order: 1
  - entity: "{{ 100 - states('sensor.percent_finished') | float }}" # Your entity here
    name: Remaining
    color: '#E0E0E0' # Paler version of chosen colour here
    order: 2
show_legend: false
show_state: none
sort: custom

Storage usage

type: custom:stacked-bar-card
title:  Storage
entities:
  - entity: sensor.docker_homeassistant_memory # Your entity here
    name: Home Assistant
    color: "#7DD3FC"
  - entity: sensor.docker_nginx_memory # Your entity here
    name: Nginx
    color: "#86EFAC"
  - entity: sensor.docker_mosquitto_memory # Your entity here
    name: Mosquitto 
    color: "#D8B4FE"
  - entity: >-
      {{ states('sensor.total_storage') | float
      - states('sensor.docker_homeassistant_memory') | float
      - states('sensor.docker_nginx_memory') | float
      - states('sensor.docker_mosquitto_memory') | float }}
    name: Unused 
    color: "#D4D4D4"
sort: highest
show_state: bar
legend_show_zero: false

CPU usage

type: custom:stacked-bar-card
title: CPU Usage
entities:
  - entity: sensor.docker_homeassistant_cpu # Your entity here
    name: Home Assistant
    color: "#7DD3FC"
  - entity: sensor.docker_nginx_cpu  # Your entity here
    name: Nginx
    color: "#86EFAC"
  - entity: sensor.docker_mosquitto_cpu # Your entity here
    name: Mosquitto
    color: "#D8B4FE"
sort: highest
show_state: bar
legend_show_zero: false

About

This is my first Home Assistant card that I will be maintaining for public use. I have tested it on my own setup and it works perfectly! Please report an issue if something doesn't work, I'll try my best to fix it.

Support me here