Lovelace: Bar Card

It’s very possible you’re not doing anything wrong. I’ve only tested it with the example I made, I’ll have a look today to see what’s up.

EDIT: Your code does look correct.

1 Like

See the edit… it is actually working. Just needed to clear cache and hard reload and it roared into life. Thanks!

1 Like

Is there a way to hide the value from being displayed in the bar?

You can now in 1.1.0.


  • Added show_value config option, hides value and unit of measurement when set to false.
  • Throws error when entity doesn’t exist.
1 Like

thanks :100:, another handy thing would to be able to set different “max: levels” for each entity whenever you have more then one in the same card.

@Gluwc I am unable to make this work have I implemented this wrong? Sensor values still showing.

              - type: custom:bar-card
                title_position: inside
                show_value: false
                align: center
                padding: 4px
                  border-radius: 5px
                columns: 4
                  - entity: sensor.core_router_state
                    title: Router
                  - entity: sensor.core_switch_state
                    title: Switch
                  - entity: sensor.upstairs_switch_state
                    title: Switch 2
                  - entity: sensor.downstairs_ap_state
                    title: Altai AP1
                  - entity: sensor.upstairs_ap_state
                    title: Altai AP2
                  - entity: sensor.5g_ac_main_state
                  - entity: sensor.5g_ac_upstairs_state
                    title: 5G Bed TV
                  - entity: sensor.5g_ac_media_tv_state
                    title: 5G Media TV
                - value: 50
                  color: '#bf4040'
                - value: 100
                  color: '#1db954'


My guess is your cache is outdated? Also you should already be able to set most config options per entity in an entity list, including min/max.

1 Like

Lol saw the title of this post and clicked on it as curious to what someone had done with Lovelace in their bar. Must be that time of the afternoon :beer:

1 Like

I see, in the docs its written like it was a global setting as opposed to an entity setting. Works if I move to entity setting.

1 Like

Is It possibile to have two target lines forse the sale bar? What Is the syntax?
I am using it for miflora sensors and I would like to insert two markers, One for the minimum value and another for the maximum value.

With this config:

  - entity: sensor.bedroom_3_temperature_battery
    title: Girls Room Senso
  - entity: sensor.loft_temperature_battery
    title: Loft Sensor
  - entity: sensor.master_bedroom_temperature_battery
    title: Master Sensor
  - entity: sensor.front_door_lock_battery
    title: Front Door Lock
  - entity: sensor.house_siren_battery
    title: Siren Battery
  - entity: sensor.mychevy_2014_chevrolet_spark_ev_battery_level
    title: Spark Battery
max: 100
type: 'custom:bar-card'
height: 25px
min: 0
  - value: 70
    color: var(--label-badge-green)
  - value: 50
    color: var(--label-badge-yellow)
  - value: 40
    color: var(--label-badge-red)

I’m getting this result:

Any ideas on what’s wrong?
Version 1.1.0 of card

HTML shows up as the following:

<div id="bar_sensor_house_siren_battery_4" style="--bar-percent:100%; --bar-charge-percent:100%; --bar-color:undefined;"><div id="targetMarker_sensor_house_siren_battery_4" style="--target-display:none;"></div></div>


Try reversing the severity order from low to high, otherwise I don’t see anything wrong with your config.

@Gluwc low to high makes the bars that are green yellow, but the other bars show --bar-color:undefined still.

Fixed it, had to set the value for green to 100.

Currently you can only set min and max values for the bar, but not for the target. I’ll consider adding a min and max for the target.

First time I am trying use a custom card since before lovelace and I can’t seem to get the card to work I am getting ‘No Card Type Found’ error.

I have followed instructions on github readme and rebooted home-assistant on my PI but keep getting same error message.

These are installation notes on github.

Step 1

Copy bar-card.js to <config directory>/www/custom-lovelace/bar-card/bar-card.js .

Step 2

Add bar-card resource to ui-lovelace.yaml .

resources: - url: /local/custom-lovelace/bar-card/bar-card.js?v=1.0.0 type: js

Step 3

Add a custom card to your ui-lovelace.yaml .

  • type: custom:bar-card entity: sensor.example

Placement of bar-card.js in my home-assistant

Code added to top of Lovelace

Attempting to create card

Slight alteration to card code, still no joy.

I am gathering it has something to do with the base of the url but I don’t know what to change it too is local meaning the www folder which is where you can see above in the screen grab the folder/file is.

Please format correctly the code, otherwise will be difficult to help you.

First of all replace local with customcards. It will link to www as local

You have to do a correct indentation, use a text editor that supports yaml so that it will be easy to format.

1 Like

I cannot seem to find a way to disable the animation of the bar-card. I have the following config:

      - type: custom:bar-card
        entity: sensor.battery_voltage
        title: Battery Voltage
        animation: off
        height: 50px
        icon: mdi:gauge
        show_icon: true
        align: split
        min: 49
        max: 57
        - value: 50.5
          color: '#FF4500'
        - value: 52
          color: '#FFA500'
        - value: 56.6
          color: '#40bf40'

Any suggestions on how to disable the animation?

Yes this is most likely an issue with the resource. It’s possible you don’t have the raw version of the .js file. Double check the contents of this file it should start with class BarCard extends HTMLElement.

When using off in HA yaml files it needs to be quoted like so 'off', same goes for 'on'. I’ve updated the documentation to include this.

Thanks - that works perfectly!