Need help with bar-card?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

custom-cards
207 Stars 26 Forks MIT License 192 Commits 30 Opened issues

Description

Customizable Animated Bar card for Home Assistant Lovelace

Services available

!
?

Need anything else?

Contributors list

Project Maintenance

bar-card

Examples

Default

Severity

Entity Row

Direction

Old Layout

Custom CSS

Options

| Name | Type | Default | Description | ---- | ---- | ------- | ----------- | type | string | Required |

custom:bar-card
| entity | string | Required | Entity State | animation | object | none | Defines animation options. See Animation Options. | attribute | string | none | Displays a specific attribute instead of state value. | color | string | var(--custom-bar-card-color, var(--primary-color)) | Color of the bar. | columns | number | none | Defines the amount of bars to be displayed on a single row when multiple entities are defined. | complementary | boolean | false | Displays complementary value (max - statevalue) instead state value. | decimal | number | none | The amount of decimals to be displayed for the value. | direction | string | right | Direction of the bar.
right
,
up
| entities | array | none | A list of entities. Accepts individual config options per defined entity. | entity
config | boolean | false | Sets the card to use the configured entity attributes as the card config. | entityrow | boolean | false | Removes the background card for use inside entities card. | height | string | 40px | Defines the height of the bar. | icon | string | icon | Defines the icon to be displayed. | limitvalue | boolean | false | Limits value displayed to
min
and
max
value. | max | number | 100 | Defines maximum value of the bar. | min | number | 0 | Defines minimum value of the bar. | name | string | none | Defines custom entity name. | positions | object | none | Defines the positions of the card elements. See Positions Options. | severity | object | none | A list of severity values. See Severity Options. | tapaction | object | none | See home assistant documentation. | target | number | none | Defines and enables target marker value. | title | string | none | Adds title header to the card. | unitof_measurement | string | attribute | Defines the unit of measurement to be displayed. | width | string | 100% | Defines the width of the bar.

Severity Options

| Name | Type | Default | Description | ---- | ---- | ------- | ----------- | from | number | Required | Defines from which value the color should be displayed. | to | number | Required | Defines to which value the color should be displayed. | color | string | Required | Defines the color to be displayed. | icon | string | none | Defines the icon to be displayed. | hide | boolean | false | Hides the bar if conditions are met.

Animation Options

| Name | Type | Default | Description | ---- | ---- | ------- | ----------- | state | string | off | Enables or disables animation.

on
,
off
| speed | number | 5 | Defines the speed of the bar animation in seconds.

Positions Options

| Name | Type | Default | Description | ---- | ---- | ------- | ----------- | icon | string | outside |

inside
,
outside
,
off
| indicator | string | outside |
inside
,
outside
,
off
| name | string | inside |
inside
,
outside
,
off
| minmax | string | off |
inside
,
outside
,
off
| value | string | inside |
inside
,
outside
,
off

Theme Variables

| Name | Description | ---- | ---- | bar-card-color | Defines the default bar color. | bar-card-border-radius | Defines the default border radius of the bar. | bar-card-disabled-color | Defines the bar color when state is

unavailable
.

CSS Elements

See example. (requires card-mod)

| Name | Description | ---- | ---- | #states | HA states containing all rows. | bar-card-card | The root bar of each defined entity containing all elements. | bar-card-background | Contains bar and any elements

outside
of the bar. | bar-card-backgroundbar | The background of the bar. | bar-card-currentbar | The filled part of the bar. | bar-card-contentbar | Contains all elements
inside
of the bar. | ha-icon | Icon element. | bar-card-iconbar | Contains ha-icon. | bar-card-name | Name element. | bar-card-min | Min value element. | bar-card-divider | Min/Max divider element. | bar-card-max | Max value element. | bar-card-value | Value element. | bar-card-animationbar | Animated part of the bar. | bar-card-targetbar | Target bar element. | bar-card-markerbar | Target marker element. | bar-card-indicator | Indicator element.

Installation

Prefered method of installation is Home Assistant Community Store.

It's required to load this card as

module
.
- url: /hacsfiles/bar-card/bar-card.js
  type: module

Examples

Default

Default

entity: sensor.example
title: Default
type: 'custom:bar-card'

Severity

Severity

entity: sensor.example
title: Severity
type: 'custom:bar-card'
severity:
  - color: Red
    from: 0
    to: 25
  - color: Orange
    from: 26
    to: 50
  - color: Green
    from: 51
    to: 100

Entity Row

Entity Row

entities:
  - sensor.example
  - entity: sensor.example
    positions:
      minmax: inside
    entity_row: true
    target: 50
    type: 'custom:bar-card'
  - entity: light.group_bedroom
    name: Example
title: Entity Row
type: entities

Direction

Direction

entities:
  - sensor.example
  - sensor.example
  - sensor.example
title: Direction
direction: up
height: 200px
stack: horizontal
type: 'custom:bar-card'

2.0.0 Default Layout (requires card-mod)

Old Layout

entity: sensor.example
positions:
  icon: 'off'
  indicator: inside
  name: outside
type: 'custom:bar-card'
width: 70%
title: 2.0.0 Default Layout
style: |-
  bar-card-value {
    margin-right: auto;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px #0005;
  }

Custom CSS Layout (requires card-mod)

Custom CSS

entities:
  - entity: sensor.example
positions:
  icon: 'off'
  indicator: 'off'
  minmax: inside
  title: inside
  value: inside
style: |-
  .contentbar-direction-right {
   flex-direction: column;
  }
  .min-direction-right {
    margin: 0px;
    margin-left: 4px;
    margin-right: auto;
    margin-bottom: -20px;
    bottom: 10px;
  }
    bar-card-value {
    margin: 0px;
  }
  bar-card-name {
    margin: 0px;
  }
  bar-card-max {
    margin: 0px;
    margin-left: auto;
    margin-top: -20px;
    top: 10px;
  }
  bar-card-divider {
    display: none;
  }
title: Custom CSS Layout
type: 'custom:bar-card'

Credits

Inspired by Big Number Card by ciotlosm.

Links

Home Assistant Community Topic

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.