Lovelace: Bar Card

Wow. This is very, very nice.
Thank you.


Hi all, is it possible to set the “max” out from a value of a sensor? I would like to use to sensor in the top (consumption) as max for all of them. Many thanx in advance.

Hi,

I don’t think this is possible natively. However, it can be achieved by combining your bar-card with a config-template-card.

1 Like

Thank you. I will look into this

I have a strange behavior. One of my bars disappears completely when it goes to a negative value, even though I have a negative min value defined. Any ideas why this might happen?

Here’s my config:


      - type: custom:bar-card
        positions:
          indicator: off
          value: inside
          title: off
          name: outside
          icon: inside
        animation:
          state: on
        direction: up
        height: 100px
        width: 22px
        columns: 9
        stack: horizontal
        min: -5
        max: 35
        entities:
          - sensor.weatherflow_forecast_0
          - sensor.weatherflow_forecast_1
          - sensor.weatherflow_forecast_2
          - sensor.weatherflow_forecast_3
          - sensor.weatherflow_forecast_4
          - sensor.weatherflow_forecast_5
          - sensor.weatherflow_forecast_6
          - sensor.weatherflow_forecast_7
          - sensor.weatherflow_forecast_8
    #      - sensor.weatherflow_forecast_9
    #      - sensor.weatherflow_forecast_10
    #      - sensor.weatherflow_forecast_11
        severity:
          - color: rgb(242,249,255)
            from: -30
            to: -17
          - color: rgb(228,242,254)
            from: -17
            to: -15.5
          - color: rgb(215,236,254)
            from: -15.5
            to: -14.5
          - color: rgb(201,229,253)
            from: -14.5
            to: -13.5
          - color: rgb(187,223,253)
            from: -13.5
            to: -12
          - color: rgb(173,216,252)
            from: -12
            to: -11
          - color: rgb(159,210,252)
            from: -11
            to: -10
          - color: rgb(145,203,251)
            from: -10
            to: -9
          - color: rgb(131,197,250)
            from: -9
            to: -8
          - color: rgb(117,190,249)
            from: -8
            to: -6.5
          - color: rgb(103,184,248)
            from: -6.5
            to: -5.5
          - color: rgb(89,177,247)
            from: -5.5
            to: -4.5
          - color: rgb(75,171,246)
            from: -4.5
            to: -3.5
          - color: rgb(61,164,245)
            from: -3.5
            to: -2
          - color: rgb(47,157,244)
            from: -2
            to: -1
          - color: rgb(33150243)
            from: -1
            to: 0
          - color: rgb(44,153,234)
            from: 0
            to: 1
          - color: rgb(55,157,224)
            from: 1
            to: 2
          - color: rgb(66,160,215)
            from: 2
            to: 3.5
          - color: rgb(77,164,205)
            from: 3.5
            to: 4.5
          - color: rgb(88,167,196)
            from: 4.5
            to: 5.5
          - color: rgb(99,171,186)
            from: 5.5
            to: 6.5
          - color: rgb(110,174,177)
            from: 6.5
            to: 8
          - color: rgb(121,178,168)
            from: 8
            to: 9
          - color: rgb(132,181,159)
            from: 9
            to: 10
          - color: rgb(143,185,150)
            from: 10
            to: 11
          - color: rgb(154,188,141)
            from: 11
            to: 12
          - color: rgb(165,192,132)
            from: 12
            to: 13
          - color: rgb(176,195,123)
            from: 13
            to: 14.5
          - color: rgb(187,199,114)
            from: 14.5
            to: 15.5
          - color: rgb(198,202,105)
            from: 15.5
            to: 16.5
          - color: rgb(209,205,96)
            from: 16.5
            to: 18
          - color: rgb(220,208,87)
            from: 18
            to: 19
          - color: rgb(231,211,78)
            from: 19
            to: 20
          - color: rgb(242,214,69)
            from: 20
            to: 21
          - color: rgb(253,217,60)
            from: 21
            to: 22
          - color: rgb(247,206,58)
            from: 22
            to: 23.5
          - color: rgb(240,194,55)
            from: 23.5
            to: 24.5
          - color: rgb(234,183,53)
            from: 24.5
            to: 25.5
          - color: rgb(227,171,50)
            from: 25.5
            to: 26.5
          - color: rgb(221,160,48)
            from: 26.5
            to: 28
          - color: rgb(214,148,45)
            from: 28
            to: 29
          - color: rgb(208,137,43)
            from: 29
            to: 30
          - color: rgb(201,125,40)
            from: 30
            to: 31
          - color: rgb(195,114,38)
            from: 31
            to: 32
          - color: rgb(188,102,35)
            from: 32
            to: 33.5
          - color: rgb(182,91,33)
            from: 33.5
            to: 34.5
          - color: rgb(175,79,30)
            from: 34.5
            to: 35.5
          - color: rgb(169,68,28)
            from: 35.5
            to: 36.5
          - color: rgb(162,56,25)
            from: 36.5
            to: 38
          - color: rgb(155,45,23)
            from: 38
            to: 39
          - color: rgb(148,33,20)
            from: 39
            to: 40
          - color: rgb(141,22,18)
            from: 40
            to: 41
          - color: rgb(134,11,15)
            from: 41
            to: 42
          - color: rgb(127,0,12)
            from: 42
            to: 49
        style: |
          ha-card {
            margin-top: 10px;
            margin-bottom: -10px;
            padding-top: 10px;
            border-top: 5px solid #222222;
          }
          bar-card-card {
            margin-right: 0px;
            font-size: 13px;
          }
          bar-card-value {
            color: #222222;
            color: #9da5b4;
          }
          bar-card-iconbar {
            width: 20px;
            color: #333;
            margin-top: 65px;
          }
          bar-card-name {
            margin: 4px 0;
            color: #9da5b4;
            color: #dadadb;
          }
          .value-direction-up {
            #color: #dadadb;
            margin-top: -125px;
          }
          bar-card-backgroundbar {
            filter: brightness(.45);
          }

Were you successful with this? I’d like to make the target value dynamic too, using another entity attribute.

Place bar-card into config-template-card and define dynamically all options you like.

2 Likes

Thanks! I will look into that.

Hi,

i’d like to change the icon color based on the severity. Is it possible to do this for each entity ?
I’ve try to set a style on one entity but it’s not use until i set style for the whole bar-card code.

  - type: markdown
    card_mod:
      class: header
    content: '# Battery'
  - type: custom:bar-card
    entities:
      - entity: sensor.atc_c77d_battery
      - entity: sensor.atc_living_91b6_battery
        style: |-
          ha-icon {
            color: red;
          }
      - entity: sensor.atc_office_e34f_battery
    severity:
      - color: '#ff5555'
        icon: mdi:battery-low
        from: 0
        to: 25
      - color: '#ffaa90'
        icon: mdi:battery-medium
        from: 26
        to: 50
      - color: '#33cc99'
        icon: mdi:battery-high
        from: 51
        to: 100
    positions:
      indicator: 'off'
    style: |-
      bar-card-name {
        color: white;
        margin-left: 14px;
      }

but of course if set in the last stype section it’s applied to all object :frowning:
Any idea of doing this (if possible)

And another question, is it possible to fix the background to a specific color ?

Setting max dynamically was addressed up-thread, but it’s not entirely clear how to get it all formatted correctly. Here’s how I managed to make it work:

In addition to bar-card, you will need to install the config-template-card module (I used HACS). Using this card, I declared a dashboard global variable that references the max value in the yaml configuration. When the user changes this value on the frontend, for example, the graph(s) will automatically re-scale. Here is an outline of how I setup the dashboard for 3 graphs; modify as needed to fit your application.

(Note: The code editor keeps prompting me to fix the formatting, but I couldn’t make it happy)

title: Home
views:
  - path: default_view
    title: Home
    badges: []
    config_template_card_vars:
      - states['number.esphome_new_size'].state
    cards:
      - type: custom:config-template-card
        entities:
          - sensor.esphome_display_1
          - sensor.esphome_display_2
          - sensor.esphome_display_3
        card:
          type: custom:bar-card
          title: 
          entities:
            - entity: sensor.esphome_display_1
              name: Bar graph 1
              max: ${states['number.esphome_new_size'].state}
              positions:
                name: outside
              color: Lime
            - entity: sensor.esphome_display_2
              name: Bar graph 2
              max: ${states['number.esphome_new_size'].state}
              positions:
                name: outside
              color: Red
            - entity: sensor.esphome_count_display_3
              name: Bar graph 3
              max: ${states['number.esphome_new_size'].state}
              positions:
                name: outside
              color: Orange             
        - type: entities
          entities:
          - entity: number.esphome_new_size
            name: Set max on bar graphs
          - entity: number.esphome_something_else
            name: Set something else
        title: 
      

Should be added to a list of monitored entities.

It is meaningless to use this option inside a VIEW (make this variable accessible in a whole view) - It is supposed to be used inside a DASHBOARD.
If variables are used in ONE card only, then there is no need to use this option at all.

Thanks. Yes, I removed the global variable and max scaling still works correctly.

Hi. How did you do a horizontal divider and a row with a collapse button?

I’m using the bar card for a progress on a 3d print where its progress is the layer count. How can I define the max value to be the state of another sensor (total layer count)? I tried {{states('sensor.sensorname')}} but that isn’t working

You’ll need another card to achieve what you want. Look into config-template-card. Basically, you put your bar-card inside a config-template-card and that allows you to use templates wherever you’d like.

According to the above, the target should accept an entity as value. But for me that is ignored.
Example:

type: custom:bar-card
entities:
  - entity: sensor.solaredge_ac_total_energy_daily
    target: sensor.pv_forecast_today
    decimal: '1'

What is “above”?
According to Docs, the “target” option is a NUMBER (fixed value).
Someone above asked about a dynamical value for this option - it was advised to use config-template-card.

That’s what I mean:

Bildschirmfoto 2023-06-23 um 21.50.33

That was a long time ago, this functionality was removed(

Is this card working for anyone on 2023.08 ?

I get, custom element doesn’t exists: bar-card error now.

Edit: Ignore, I had to clear cache.