custom-cards / bar-card

Customizable Animated Bar card for Home Assistant Lovelace

bar-card

Examples

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 - state_value) 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.
entity_row	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.
limit_value	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.
tap_action	object	none	See home assistant documentation.
target	number	none	Defines and enables target marker value.
title	string	none	Adds title header to the card.
unit_of_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

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

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

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

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)

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)

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

bar-card's Issues

Severity not correct?

Maybe I am misunderstanding how severity works but I would have expected the following config:

      type: 'custom:bar-card'
      direction: right
      entity: sensor.pct_used_gb
      height: 30px
      max: 100
      min: 0
      severity:
        - value: 0
          color: '#0da035' # green
        - value: 75
          color: '#e0b400' # yellow
        - value: 90
          color: '#e45e65' # red
      title: NBN Data Used
      unit_of_measurement: '%'

To be green for a value of 6.6%. Instead it is yellow. https://i.imgur.com/J6RAPL6.png

feature request: allow entity as severity value

Right now, the severity values are fixed. It would be nice to optionally make these values dynamic by setting an entity as with the target value.

BUG: Can't use margin css-style in bar-card-iconbar when position is inside since version 3.1.0

Since bar-card version 3.1.0 it is no longer possible to use "bar-card-iconbar" margin css-style when icon postitions inside is set.

Before version 3.1.0 i used the code below to get my icons in the middle of the bar.

bar-card-iconbar {
    color: white;
    margin-top: 80px;
}

And now they stay on top.

Can not set options for entities in a list?

custom:bar-card v 1.6.2

Not sure if I read the documentation right.

entities | array | none | A list of entities. Accepts individual config options per defined entity.

As I read it, I can add

entities:
  - a
  - b
  - c

and give config options for each of them, but I get an error about bad indentation when doing so.

I would like to set the bars of each of them to have specific colous.

BUG: Error loading card

Error message:

Uncaught SyntaxError: Unexpected token 'export' bar-card.js:5219

Home Assistant: 0.108.9
I've already clear cache and hard reloaded the frontend but the issue persists.

Let me know if you need any more information.

Add a sensor as a Target

Hi,

Thanks for the card, it is really awesome and it really helps enhancing my views.

I am using this bar-card for my NUT sensors and I have two sensors I wanted to combine into one car card. First is the Current battery level and second is the low battery set point.

I created a bar-card for my Current battery level and I wanted to add the second sensor as my target but I could not as it only allows numbers.

The easy workaround is to input the number of my sensor as it is a static value but I was wondering if this is something you would consider.

Not critical but nice to have.

Thanks

Round border bar

Hy, today i converted gauge card to bar card. It is very beautiful job your card, thank you.
how can I have the round edge of the bar like you example ?
I use normally car-mod to round border of other cards.
I try with code behind but dont' work.
card_style:
border-radius: 10px

I use v. 3.0.1 and i have restarted.

• type: 'custom:bar-card'
  entity: sensor.processor_use
  card_style:
  border-radius: 10px
  severity:
  • color: green
    from: 0
    to: 50
  • color: orange
    from: 51
    to: 75
  • color: red
    from: 76
    to: 100

Thank you for you efforts.

Hide up and down arrows

Most likely I am just blind, but I can't find a way to hide the up and down arrows?!?
I'd like to use the bar-card to display f.e. disc-usage, so user-input shouldn't be allowed.
I guess this is possible, right?

Icon to replace title?

Would it be possible to have the icon replace the title I.e. be outside the bar, and then have the value positioned left, right or centre within the bar?

Title

I'm confused about the Title. You can specify the Title in the Header. But Title is also used to display the friendly name of the entity.
Title: 'off' # means no friendly name.
I want to add CSS to the Header (to change the font size and the padding).
It used to be that I could just specify the title-style. Why has that been removed?

Thank you for all your work. The card is great to look at!

"Cannot add property x, object is not extensible" [Solved - issue with HACS update]

Version 1.7.1 on HA 0.106.2

Items do not appear to be defaulting, need to add each property manually.

"Cannot add property x, object is not extensible" where x is each property that I do not declare

card does not render is null entity

I have the card render ink levels, however if the sensors with the ink levels fail to initialise (e.g. the printer is off when HA starts) then the card stops the whole view from being rendered and you a left with a blank screen.
Could the entities be checked that they are non-null and appropriate error be displayed?

⚠️ Information: Future card configuration changes.

Hi.

A change in how lovelace cards are set up in Home Assistant 0.105 increases performance, but enables cards to accidentally modify their own configuration in the loaded lovelace configuration.

I'm going through the cards in the HACS default repository, and noticed that your card may be susceptible to this. Looking through your code it seems you may modify parts of the config object passed to your card in setConfig.

The result could be that your card does not work well with the GUI editors or that parts of the configuration start showing up multiple times.

At some point in the future, it is likely that the configuration will be frozen before being passed to setConfig. At this point, your card will fail entirely when it tries to modify the configuration object.

There are several ways to fix/protect agains this problem.

The best is to restructure setConfig such that the configuration is never modified.
Other alternatives are to make a copy of the configuration and work on that instead.

setConfig(config) {
  config = { ...config }; // This works for simple configurations not containing arrays or objects
...

import { deepClone } from "deep-clone-simple";
// https://github.com/balloob/deep-clone-simple

setConfig(config) {
  config = deepClone(config); // This is a safe and fast method
...

or

setConfig(config) {
  config = JSON.parse(JSON.stringify(config)); // This uses built-in functions, but may be slower than deepClone
  ...

Please note that I have not tested your card agains Home Assistant 0.105 or later, but just quickly looked through the code. If I'm mistaken in my assessment, I appologize for taking your time.

See thomasloven/hass-config#6 for more info.

Having Title inside keeping it in the default position

Hello

I've got the following code and expecting the title to be inside the bar chart

` - type: custom:bar-card

entity: sensor.time_shaun_been_home

title: Time Spent Home

align: split

color: 'var(--primary-color)'

positions:

  icon: 'off'

  title: 'inside'`

But as you can see in the screenshot the title is staying in the default position as well as being inside

NaN value in bar card

Since the 1.5.0 version, my hassio version sensor in the bar-card no longer wants to show the value, but NaN appears. While if I click on it, I will just see the correct value and if I put the entry somewhere else in my lovelace config it goes fine too.

Running Hassio: 0.97.2
Also tested release 1.5.2 and same problem

The lovelace code I used can be found here

Bar size relative to the containing card

Is it somehow possible to use a variable size in relation to the containing card? So that the bars get resized accordingly, when the size of the card gets changed?

Bar-graph on top of each other?

This is related to the other question I had to the other with the corona sensor (this is just as an example).
The sensor provides four numbers:

confirmed
cured
recovered
ill

Where the first number is the total of the other three.

Is it possible to have a bar where the other numbers sort of mark the fraction of the total (stacked bar chart)?

bar-card.[ts] in src?

src has bar-card.ts, not bar-card.js. Was this intentional?

Severity value & icons

For now it is not possible to use different icons at different value-ranges / severities (e.g. mdi: battery-10 and so on).

Can you allow icon-changes on severities?

Card Margin

Hi

This is not an issue really but is there a way to change the margins indicated by the green arrows in the screenshot?

Thank you.

animation:
  state: 'on'
attribute: current_position
color: red
decimal: false
direction: up
entities:
  - entity: cover.master_bedroom_shutter
    name: Master
  - entity: cover.front_bedroom_shutter
    name: Front
  - entity: cover.back_bedroom_shutter
    name: Back
  - entity: cover.sitting_room_front_shutter
    name: Front
  - entity: cover.sitting_room_door_shutter
    name: Door
  - entity: cover.sitting_room_back_shutter
    name: Back
height: 100px
max: 100
min: 0
positions:
  icon: 'off'
  indicator: inside
  title: outside
stack: horizontal
style: |-
  bar-card-value {
    margin-top: auto;
    margin-bottom: auto;
  }
tap_action: info
type: 'custom:bar-card'
width: 60%

enhancement: ability to color icons

The specific use case is for entities that represent ink for IPP printers. I'd like to use the bar-card's icon to represent the ink color, and use the severity options to show the state of the ink level.

Multiple entities, multiple config query

Hi there - not an issue, just a query.

Your readme says that when using an entities array, it's possible to have config options for each defined entity:

"A list of entities. Accepts individual config options per defined entity."

What's the syntax for that? I've tried a few, including this with a variety of indent attempts.

    entities:
      - sensor.sensor1
          color: '#00ba6a'
      - sensor.sensor2
          color: '#aabbcc'

Help! My actual use case is to have two bars with two different colours. I used to have two bar elements, but the new version has way larger margins so they're spaced out too far.

Cheers,
Andy

tap_action error

code:

tap_action: service
service_options:
service: input_select.select_option
data:
entity_id: input_select.cover_select
option: option_name

error:

Error handling message: required key not provided @ data['domain']. Got None

can you help me?
where am i wrong?

custom-cards org

Invitation to bring your repo over to the community custom-cards organization: https://github.com/custom-cards/information

Let me know if you're interested and I can float you an invitation to the org. Thanks!

Title from entity ?

I tried setting a dynamic title by using a entity, but that only results in [object Object]
By any chance, would this be possible?
title : {{ states.input_select.test.state }}

Animation

Hi

In version 2 I had the following setup:

Screen Recording 2020-04-09 at 13.29.59.zip

The vertical bars represent covers.
While the position was changing, the bar had a cool animation that showed the movement of the cover.

I cannot reproduce it in version 3. Now the bar just jumps in steps. Not so cool.

Screen Recording 2020-04-09 at 13.40.21.zip

Also, the position has moved up. Can I have this in the middle as it was before?

This is the old config:

    align: center
    animation: auto
    attribute: current_position
    background: '#00FF00'
    background_style: false
    card_style: false
    charge_entity: false
    color: '#FF5555'
    columns: 6
    decimal: false
    delay: 5000
    direction: up
    entities:
      - entity: cover.kitchen_shutter
        title: Kitchen
      - entity: cover.dining_room_shutter
        title: Dining
      - entity: cover.stairs_shutter
        title: Stairs
      - entity: cover.bathroom_shutter
        title: Bath
      - entity: cover.basement_shutter
        title: Base
      - entity: switch.garden_lights
        title: .
    height: 100px
    icon: false
    icon_position: 'off'
    icon_style: false
    indicator: auto-vertical
    limit_value: false
    max: 100
    min: 0
    minmax_style: false
    padding: 4px
    rounding: 3px
    saturation: 50%
    severity: false
    show_minmax: false
    show_value: true
    speed: 1000
    tap_action: info
    target: false
    title: false
    title_position: bottom
    title_style: false
    type: 'custom:bar-card'
    unit_of_measurement: false
    value_style: false
    visibility: false
    width: 50%

This is the new config:

entities:
  - entity: cover.kitchen_shutter
    name: Kitchen
  - entity: cover.dining_room_shutter
    name: Dining
  - entity: cover.stairs_shutter
    name: Stairs
  - entity: cover.bathroom_shutter
    name: Bath
  - entity: cover.basement_shutter
    name: Base
  - entity: switch.garden_lights
    name: .
animation:
  - speed: 1000
  - delay: 5000
attribute: current_position
color: red
decimal: false
direction: up
height: 100px
max: 100
min: 0
positions:
  icon: 'off'
  indicator: inside
  title: outside
stack: horizontal
tap_action: info
type: 'custom:bar-card'
width: 50%

Thank you

Size problem when stacked (stack: horizontal)

I run into a little issue today:

I don't know what to do in order to fix this... Any suggestion?

bar-card.js asset for release 1.3.0 doesn't contain minmax code

I was wondering why HACS wasn't showing my minmax stuff until I realized it's not actually in the assets for that release: https://github.com/custom-cards/bar-card/releases/tag/1.3.0

See https://github.com/custom-cards/bar-card/releases/download/1.3.0/bar-card.js and search for "show_minmax". It isn't there.

Background disapear after HA reboot using severity

When using a severity settings, it seems the order of value/color is important. However after HA reboot is always sort naturaly and so the bar-card is broken. If aI change back the order everything works as expected.

- align: split
    entity: sensor.temperature_sda
    icon: 'mdi:thermometer'
    severity:
      - color: '#40bf40'
        value: 50
      - color: var(--label-badge-yellow)
        value: 60
      - color: '#bf4040'  
        value: 100              
    type: 'custom:bar-card'

Get the target marker without change of colors at the rest of the bar.

Hi everyone,
I'm trying to customize the CSS to get a bar with the target-marker but without shift in color of the the rest of the bar. Just like if the only difference between the regular one and the one with target option enabled was the line of the marker itself and nothing more.
I'm playing with bar-card-targetbar and bar-card-targetmarker CSS options but I can't see any changes at all, no matter what I do to them.
Can someone help me out here? Or, if I'm using the wrong approach, what else could I try?

Many thanks for every little help!

PS: My card looks like this...

style: |-
  bar-card-targetbar {
    # bla bla
  }
  bar-card-targetmarker {
    # bla bla
  }

severity for values not numbers

Hi,

in older versions it was possible to use values instead of numbers in severities. In the documentation this is no more possible, but it still works:

  - type: custom:vertical-stack-in-card
    title: Batterien
    cards:
      - type: custom:auto-entities
        card:
          type: custom:bar-card
          attribute: battery
          unit_of_measurement: "V"
          positions:
            icon: 'off'
            indicator: 'off'
            title: inside
          min: 0
          max: 3.1
          color: Green
          severity:
          - color: Red
            from: 0
            to: 2.1
          - color: Orange
            from: 2.2
            to: 2.4
        filter:
          include:
          - attributes:
              battery: "<=100"
      - type: custom:auto-entities
        card:
          type: custom:bar-card
          attribute: battery
          unit_of_measurement: " "
          positions:
            icon: 'off'
            indicator: 'off'
            title: inside
          color: Green
          severity:
          - color: Red
            value: Low
        filter:
          include:
          - attributes:
              battery: Low
          - attributes:
              battery: High

Will this still work in future version? If yes: Please add this possibility to the documentation.

after update some strange design issues....

card:
  max: 100
  min: 0
  positions:
    icon: 'off'
    indicator: inside
    title: outside
  severity:
    - color: 'rgb(150,0,0)'
      from: 0
      to: 9
    - color: 'rgb(163,23,0)'
      from: 10
      to: 19
    - color: 'rgb(195,74,0)'
      from: 20
      to: 29
    - color: 'rgb(231,134,0)'
      from: 30
      to: 39
    - color: 'rgb(255,185,0)'
      from: 40
      to: 49
    - color: 'rgb(255,215,0)'
      from: 50
      to: 59
    - color: 'rgb(219,216,0)'
      from: 60
      to: 69
    - color: 'rgb(167,207,0)'
      from: 70
      to: 79
    - color: 'rgb(92,182,0)'
      from: 80
      to: 89
    - color: 'rgb(35,161,0)'
      from: 90
      to: 99
    - color: 'rgb(0,150,0)'
      from: 100
      to: 100
  style: |-
    bar-card-value {
      margin-right: 7px;
      font-weight: bold;
    }
    bar-card-title {
      margin-left: 0px;
      margin-right: 2x;
      text-align: left;
    }    
  type: 'custom:bar-card'
  width: 63%
filter:
  include:
    - entity_id: sensor.ssid_*
sort:
  method: name
type: 'custom:auto-entities'

and it looks like:

pls advise.

Per-entity min/max attribute not working

I'm using bar-card with an entity list, where each entity has a different min and max attribute. Relevant pars of my config:

type: 'custom:bar-card'
columns: 4
entities:
  - entity: sensor.bme280_sensor_humidity
    title: Humidity
    min: 0
    max: 100
  - entity: sensor.pm2_5
    title: PM2.5
    min: 0
    max: 30
  - entity: sensor.pm10
    title: PM10
    min: 0
    max: 30
  - entity: sensor.waqi_pm10
    title: PM10 outside
    min: 0
    max: 30

However, it looks like every bar is rendered with a range of 0-100:

What's strange is that if I define a max attribute on the main object, all bars are rendered with respect to their own min and max attributes:

Conditional title color

Isn't it possible to define conditional text color ?

For example like this:
title_style:
color: >
{% if is_state('switch.sonoff_p3', 'ON') %} red {% else %} green {% endif %}

Add an header text to the card

There is a way to add a title to the card (not a title to a single bar)?

"Cannot add property direction, object is not extensible" in HA 0.106.6

Red box with the above statement.
It is probably related to new changes since 0.106 affecting custom cards.
More details here:
https://developers.home-assistant.io/blog/2020/02/18/106-custom-card-changes/
I will take the opportunity to thank you for the card, hoping that it can be solved easily and soon,
Thanks.

Negative temperature

Hello All,

I have this card:

entities:
  - entity: sensor.node_11_temperature
    title: Frontdoor
  - entity: sensor.node_13_temperature
    title: Door iMac
  - entity: sensor.node_14_temperature
    title: Bedroom
  - entity: sensor.node_15_temperature
    title: Bathroom
  - entity: sensor.node_16_temperature
    title: Kitchen
  - entity: sensor.node_17_temperature
    title: Hallway
  - entity: sensor.node_18_temperature
    title: Diningroom
  - entity: sensor.node_19_temperature
    title: Livingroom
  - entity: sensor.node_20_temperature
    title: Toilet
severity:
  - value: -23
    color: '#bd006b'
  - value: -18
    color: '#b000bd'
  - value: -12
    color: '#7918c4'
  - value: -7
    color: '#0000ff'
  - value: -1
    color: '#00aad9'
  - value: 4
    color: '#04b504'
  - value: 10
    color: '#00ff00'
  - value: 16
    color: '#ffcc00'
  - value: 21
    color: '#ff9600'
  - value: 27
    color: '#ff1100'
  - value: 32
    color: '#d61204'
  - value: 38
    color: '#b50e02'
title_position: inside
type: 'custom:bar-card'

But when I have a negative temperature I see this:

I did a test, the minus temp is not shown correct. How can I solve this?

Settings not honoured

E.g. when setting:
target: 0
decimal: 0
unit_of_measurement: ''

the setting is not applied.

Version 2.0.1

Bar size scaled after the largest number?

Hi there

HA: 0.106.3
Bar-graph: 1.7.1
auto-entities: 16

I've just installed the Corona sensor here, and made a card like this:

  - card:
      max: 100000
      min: 0
      padding: 2px
      title_position: inside
      type: 'custom:bar-card'
    filter:
      include:
        - entity_id: '*worldwide_coronavirus*'
    sort: entity_id
    type: 'custom:auto-entities'

As you can see I've set the max to 100.000, which I then have to adjust when we cross that thresshold.
Is it possible to have just the largest number determine the length of the bar, and have the others scaled down to size?

export declarations may only appear at top level of a module

Since updating to 3.1.0 I have been receiving this error in the log:

ERROR (MainThread) [frontend.js.latest.202004072] https://my_domain.duckdns.org/hacsfiles/bar-card/bar-card.js:5219:0 SyntaxError: export declarations may only appear at top level of a module

And the card no longer displays in the front end. I get the dreaded red: Custom element doesn't exist: bar-card. I have tried reloading the browser cache without success.

Reverting to version 3.0.9 and reloading the browser cache rectifies the issue.

Bar becomes invisible when severity is defined

The bar becomes invisible when the severity is defined, but not always.

e.g. only shows the temperature and title in the card. Remove the severity and the bar shows. No errors in the javascript console.

type: 'custom:bar-card'
title: Tapwater
show_icon: true
entity: sensor.heatpump_tapgemeten
min: 35
max: 65
target: 58
severity:

• value: 40
  color: '#bf4040'
• value: 50
  color: '#bf9540'
• value: 55
  color: '#40bf40'

Icon & title alignment and dynamic width?

Hi, would it be possible to get the alignment of the text and icon to always be fixed to the left - similar to how other entities work? at the moment it looks like below when they're included:

without locking the width of the bar to 65% it would end up looking like this which is totally unusable as the text can't be read and the icon becomes extremely small - if the bar could have an option to dynamically resize based on title length that would be great.:

Columns option gone?

Was the columns: option taken out? If so, why and is there another way to do this now?

Severity values with entities

Is there any way to use basic operations in severity or am I missing something

  - type: custom:bar-card
    entity: sensor.devices_online
    min: 0
    max: sensor.total_devices
    severity:
      - value: sensor.total_devices
        color: var(--primary-color)
      - value: sensor.devices_online
        color: orange

sensor.total_devices is relatively static and sensor.devices_online will always be less than or equal to sensor.total_devices I don't see a way I can ever trigger the second severity without something like
- value: sensor.total_devices -1
or the ability for a greater than operation.

I hope this makes sense and i'm missing something simple
Thanks

License?

Can we add an Open Source license to this project? MIT seems quite popular for Home Assistant cards.

Some examples: https://github.com/ljmerza/calendar-card/blob/master/LICENSE and https://github.com/maykar/compact-custom-header/blob/master/LICENSE

setConfig keeps adding elements

Hi.

Every time setConfig is run, a new ha-card is added to the shadowRoot, but it's never removed.

setConfig can be run several times during the lifetime of the card, e.g. if the user uses it with an entity-filter card.

An easy fix is to add the following somewhere before this.shadowRoot.appendchild(cardContainer) inside setConfig():

while(this.shadowRoot.lastChild)
  this.shadowRoot.removeChild(this.shadowRoot.lastChild);

See /thomasloven/lovelace-auto-entities#31

Error when manually enabling the charge animation.

When working with HASS 0.88.1 and the latest version of this card (0.0.5) everything works great until you manually enable the charge animations with the following parameters:

  - type: 'custom:bar-card'
    entity: sensor.lr_window_south_battery
    title: Living Room South Window
    indicator: right
    animation: charge
    charge_entity: 'off'
    width: 40%
    severity:
      - value: 10
        hue: '0'
      - value: 25
        hue: '50'
      - value: 100
        hue: '120'

The following error can be observed:
/customcards/custom-lovelace/bar-card/bar-card.js?track=false:370:65 Uncaught TypeError: Cannot read property 'state' of undefined

The fix for this issue is to change line 370 from
chargeEntityState = hass.states[config.charge_entity].state;
to
chargeEntityState = config.charge_entity;

stack:vertical

Good afternoon, appreciate the bar card!

I would like to stack:vertical two entities such as Watts and Amps. I'm able to stack these two sensors, but would like to change the severity of the two sensors. I can define the severity for the sensors as a ground, but not individually. Is it possible to define the severity of individual sensor when stack:vertical is used?

Thanks

All cards gave error

Hello. Today I check my cards and all of them said this:

can you help?

Target from sensor entity not working anymore

Hello, Get target from entity is not working anymore? it was great feature.

target | number | none | Defines and enables target marker value.