Lovelace: Bar Card

I can’t find the setting to change the color of the bar background. So where the red arrow is on. Is it possible to change that?


Currently there is no option to change this. Why would you like to change it? I could add an option to change the background CSS, however I’d rather see if I can adjust the default.

Release 0.1.8 adds the option to define a card config for each item in the entities list, similar to the entities card. Cards in the entities list will share the main card config except for the items configured per entity.

  • entities config option now accepts card config options
  • fixed card element layout


- type: custom:bar-card
    - entity: sensor.living_room_plant_1_moisture
      title: Drancaena
      target: 30
    - entity: sensor.living_room_plant_2_moisture
      title: Meat Eater
    - entity: sensor.living_room_plant_3_moisture
      title: Vet Plant
    - entity: sensor.bedroom_plant_1_moisture
      title: Orchid
  min: 0
  max: 50
  target: 20
  padding: 2px
  - value: 10
    color: var(--bar-red)
  - value: 30
    color: var(--bar-yellow)
  - value: 50
    color: var(--bar-green)

I would like to change that color so that it’s more in line with the theme colors.

And as you can change almost all colors of this card, it would be great if this one can be changed as well :+1:

I was just curious, since I don’t want to add loads of CSS options. However I agree that since there’s options for most other other parts there’s not really a big reason not to add it, plus it’s pretty easy to add.

Release 0.1.9

  • removed charge config option from animation config, is now based on charge_entity
  • added background_style config option

One thing to keep in mind when changing the background CSS is that by default it has some properties to make it transparent and darker. So if you want to set it to a solid color you’ll have to override those as well.

  background: red
  opacity: 1
  filter: brightness(1)

Hi @Gluwc, thks for this Card!!

I have a litel problem with the last update:

Can you help me?

And… its possible to add a General Title?

I love this card!

1 Like

Looking at your config I don’t see a reason why it wouldn’t work. Are you sure it’s using the latest version of the card and not the cached version?

If you’re using custom updater you should use the customcards path instead of local. If you’re not using custom updater make sure you add the version number to the resource to force a cache update.

Using custom updater

 - url: /customcards/custom-lovelace/bar-card/bar-card.js

Non custom updater

 - url: /local/custom-lovelace/bar-card/bar-card.js?v=0.1.9

If you’re sure it’s using the latest version could you check the debug console (F12 in chrome) and see if it throws an error?

Also currently you can not set a main title, however you could try which lets you set a title.

Ops!! ooh yes!

  • url: /customcards/custom-lovelace/bar-card/bar-card.js


Could it be possible to make the bar have a tap action? I’d like to be able to tap it and for it to run a shell command…

I’m working on another big update at the moment, I’ll try to include optional service calls into the tap action.

1 Like

Well that’s getting me excited now lol!

Hi @Gluwc, I have some problems with this configuration:

…but If I remove this section… then shows a bars in blue color…

  - color: '#bf4040'
    value: 33
  - color: '#bf9540'
    value: 66
  - color: '#40bf40'
    value: 100

Thanks for your help!

There’s a known issue on github for this, I’ll try to fix it tomorrow.

This should be fixed in the latest version 0.2.0b0.

I will probably remove support for the hue and saturation config in the full 0.2.0 release as well, so this will be a breaking change for anyone still using an old version of the card.

Hopefully I’ll have time this weekend to commit my big update. It will include being able to hide bars if they are below or above a certain value. This allows you to define a big list of bars, but only have the high priority bars visible.

Also you will be able to set config options for a bar in the entity attributes by adding these entries through the HA entity customization. This can be useful if you want to use the bar in multiple locations or views, but not have to set the config for every card individually or if you want to trigger automations based on the set visibility threshold.

1 Like

Oook!!, perfect…:laughing:

I update my configuration when I come back to my home and I will report if I have some problem.

Thank you.

any news on this?

Updates have been a bit slow since I’ve been working on my HA setup/devices. Most of the update is ready so I’ll see if I can release it today.

1 Like

I’ve updated the versioning so the new release is 1.0.0.

Breaking Change

  • Removed hue and saturation config options. From now on color has to be used in the card config and severity config.


  • Updated versioning.
  • Added entity_config config option. Enables use of entity attributes as config options.
  • Added visibility config option. Allows hiding of the bar based on condition.
  • Added tap_action config option. Selects the the action when tapping the bar.
  • Added service_config config option. A list of config options when using the service option for tap_action.
  • Optimized amount of frames for bar animation.


Service Call

- type: custom:bar-card
  title: Service Call
  entity: sensor.example
  tap_action: service
    domain: mqtt
    service: publish
      topic: "example"
      payload: "example"

Entity Config

- type: custom:bar-card
  padding: 2px
  entity_config: true
  show_icon: true
  align: split
  indicator: right

    # Batteries
    - entity: sensor.lucas_phone_battery
    - entity: sensor.lucas_tablet_battery

    # Plants
    - entity: sensor.living_room_plant_1_moisture
    - entity: sensor.living_room_plant_2_moisture
    - entity: sensor.living_room_plant_3_moisture
    - entity: sensor.bedroom_plant_1_moisture

When entity_config is enabled in the card config will use options defined in the entity attributes. This allows you to re-use the bar config in your UI without having to define the options for each use. In combination with the visibility config option you will be able to define a list of bars that are only visible when they are below a certain threshold.


  icon: mdi:leaf
  title: Orchid
  target: 30
  max: 50
  visibility: '< 15'
  - value: 10
    color: var(--bar-red)
  - value: 20
    color: var(--bar-yellow)
  - value: 50
    color: var(--bar-green)

Hi. Are those Netatmo thermostat/Valves? How did you get the signal strenght/battery level? thanks.

OK I can’t figure this out. I have an entity button like this:

              - type: entity-button
                entity: sensor.abb_usage
                icon: mdi:lan-connect
                name: Update ABB
                  action: call-service
                  service: shell_command.abbusage

I am trying to replace that with being able to tap on the bar instead of having an extra button. I tried this:

          - type: 'custom:bar-card'
            title: Month Used
            entity: sensor.abb_usage
            attribute: daysUsed
            min: 1
            max: sensor.abb_usage.attributes.daysTotal
            height: 20px
            direction: right
            unit_of_measurement: days
            tap_action: service
              domain: shell_command
              service: abbusage

But it doesn’t work. What am I doing wrong?

EDIT: Maybe I got it right. I emptied cache and did a hard reload and it now appears to work. Can you confirm my code is right?