Home

Awesome

Project Maintenance

bar-card

Examples

Default

Severity

Entity Row

Direction

Old Layout

Custom CSS

Options

NameTypeDefaultDescription
typestringRequiredcustom:bar-card
entitystringRequiredEntity State
animationobjectnoneDefines animation options. See Animation Options.
attributestringnoneDisplays a specific attribute instead of state value.
colorstringvar(--custom-bar-card-color, var(--primary-color))Color of the bar.
columnsnumbernoneDefines the amount of bars to be displayed on a single row when multiple entities are defined.
complementarybooleanfalseDisplays complementary value (max - state_value) instead state value.
decimalnumbernoneThe amount of decimals to be displayed for the value.
directionstringrightDirection of the bar. right, up
entitiesarraynoneA list of entities. Accepts individual config options per defined entity.
entity_configbooleanfalseSets the card to use the configured entity attributes as the card config.
entity_rowbooleanfalseRemoves the background card for use inside entities card.
heightstring40pxDefines the height of the bar.
iconstringiconDefines the icon to be displayed.
limit_valuebooleanfalseLimits value displayed to min and max value.
maxnumber100Defines maximum value of the bar.
minnumber0Defines minimum value of the bar.
namestringnoneDefines custom entity name.
positionsobjectnoneDefines the positions of the card elements. See Positions Options.
severityobjectnoneA list of severity values. See Severity Options.
tap_actionobjectnoneSee home assistant documentation.
targetnumbernoneDefines and enables target marker value.
titlestringnoneAdds title header to the card.
unit_of_measurementstringattributeDefines the unit of measurement to be displayed.
widthstring100%Defines the width of the bar.

Severity Options

NameTypeDefaultDescription
fromnumberRequiredDefines from which value the color should be displayed.
tonumberRequiredDefines to which value the color should be displayed.
colorstringRequiredDefines the color to be displayed.
iconstringnoneDefines the icon to be displayed.
hidebooleanfalseHides the bar if conditions are met.

Animation Options

NameTypeDefaultDescription
statestringoffEnables or disables animation. on, off
speednumber5Defines the speed of the bar animation in seconds.

Positions Options

NameTypeDefaultDescription
iconstringoutsideinside, outside, off
indicatorstringoutsideinside, outside, off
namestringinsideinside, outside, off
minmaxstringoffinside, outside, off
valuestringinsideinside, outside, off

Theme Variables

NameDescription
bar-card-colorDefines the default bar color.
bar-card-border-radiusDefines the default border radius of the bar.
bar-card-disabled-colorDefines the bar color when state is unavailable.

CSS Elements

See example. (requires card-mod)

NameDescription
#statesHA states containing all rows.
bar-card-cardThe root bar of each defined entity containing all elements.
bar-card-backgroundContains bar and any elements outside of the bar.
bar-card-backgroundbarThe background of the bar.
bar-card-currentbarThe filled part of the bar.
bar-card-contentbarContains all elements inside of the bar.
ha-iconIcon element.
bar-card-iconbarContains ha-icon.
bar-card-nameName element.
bar-card-minMin value element.
bar-card-dividerMin/Max divider element.
bar-card-maxMax value element.
bar-card-valueValue element.
bar-card-animationbarAnimated part of the bar.
bar-card-targetbarTarget bar element.
bar-card-markerbarTarget marker element.
bar-card-indicatorIndicator 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