ha-sankey-chart icon indicating copy to clipboard operation
ha-sankey-chart copied to clipboard

Published 20 hours ago • verified publisher icon MindFreeze
→

Metadata

A Home Assistant lovelace card to display a sankey chart. For example for power consumption

Sankey Chart Card

A Home Assistant lovelace card to display a sankey chart. For example for power consumption.

GitHub Release License hacs_badge

Project Maintenance GitHub Activity

This card is intended to display connections between entities with numeric state. It is not a general graph card.

Example card

Options

Name Type Requirement Default Description
type string Required custom:sankey-chart
sections list Required Entities to show divided by sections, see sections object for additional options.
title string Optional Optional header title for the card
unit_prefix string Optional Metric prefix for the unit of measurment. See https://en.wikipedia.org/wiki/Unit_prefix . Supported values are m, k, M, G, T
round number Optional 0 Round the value to at most N decimal places. May not apply to near zero values, see issue #29
height number Optional 200 The height of the card in pixels
wide boolean Optional false Set this to true if you see extra empty space in the right side of the card. This will expand it horizontally to cover all the available space. Enable if you see empty space on the right size.
show_icons boolean Optional false Display entity icons
show_names boolean Optional false Display entity names
show_states boolean Optional true Display entity states
show_units boolean Optional true Display unit of measurement
min_box_height number Optional 3 Minimum size of an entity box
min_box_distance number Optional 5 Minimum space between entity boxes
throttle number Optional Minimum time in ms between updates/rerenders

Sections object

Name Type Requirement Default Description
entities list Required Entities to show in this section. Could be just the entity_id as a string or an object, see entities object for additional options. Note that the order of this list matters

Entities object

Name Type Requirement Default Description
entity_id string Required Entity id of the sensor
attribute string Optional Use the value of an attribute instead of the state of the entity. unit_of_measurement and id will still come from the entity. For more complex customization, please use HA templates.
type string Optional entity Don't worry about it. Will be used in the future
children list Optional List of entity ids describing child entities (branches). Only entities from subsequent sections will be connected.
name string Optional entity name from HA Custom label for this entity
color string Optional var(--primary-color) Color of the box
color_on_state boolean Optional false Color the box based on state value
color_limit string Optional 1 State value for coloring the box based on state value
color_above string Optional var(--paper-item-icon-color) Color for state value above color_limit
color_below string Optional var(--primary-color) Color for state value below color_limit
remaining object Optional This configures wheter to display a box for the remaining state if the sum of entity states from children is less than this entity's state.

Remaining object

Name Type Requirement Default Description
name string Required Label for this entity. For example 'Other'
color string Optional var(--primary-color) Color of the box

Examples

Simple

Simple example card

- type: custom:sankey-chart
  show_names: true
  sections:
    - entities:
      - entity_id: sensor.power
        children:
          - sensor.washing_machine_power
          - sensor.other_power
    - entities:
      - sensor.washing_machine_power
      - sensor.other_power

Daily energy use

Energy example card

- type: custom:sankey-chart
  show_names: true
  unit_prefix: k
  round: 1
  wide: true
  sections:
    - entities:
        - entity_id: sensor.solar
          color: var(--warning-color)
          children:
            - sensor.daily_energy
        - entity_id: sensor.grid
          children:
            - sensor.daily_energy
        - entity_id: sensor.battery
          color: var(--success-color)
          children:
            - sensor.daily_energy
    - entities:
        - entity_id: sensor.daily_energy
          children:
            - sensor.floor1
            - sensor.floor2
            - sensor.garage
    - entities:
        - entity_id: sensor.garage
          color: purple
          remaining:
            name: Other
          children:
            - sensor.ev_charger
        - entity_id: sensor.floor1
          children:
            - sensor.living_room
            - sensor.washer
        - entity_id: sensor.floor2
    - entities:
        - sensor.ev_charger
        - sensor.living_room
        - sensor.washer

Development

  1. npm i
  2. npm start
  3. The compiled .js file will be accessible on http://127.0.0.1:5000/ha-sankey-chart.js.
  4. On a running Home Assistant installation add this to your Lovelace resources: 
- url: 'http://127.0.0.1:5000/ha-sankey-chart.js'
  type: module

← Metadata

324
Stars
15
Forks
Watchers

Owner

verified publisher icon MindFreeze

Metadata

A Home Assistant lovelace card to display a sankey chart. For example for power consumption

Back