Lovelace: Bar Card

Hello, I tried to install bar card today and the UI config is totally broken, I can not configure anything, add entities, etc… What is wrong?
Thanks.

That I was trying before. Not working. Seems really something wrong in this line. It will cause the hole graph is not shown. Really weird.

I’m sorry, I wasn’t clear. Make a card using just the code that I posted above (the nuclear option). This is just a bare bones test card to figure out where the trouble is. It’s not intended to be your final pretty card. If it works, then the problem is somewhere in the rest of your code. If it doesn’t, then there’s something wrong behind the scenes.

Nope is not working. The HACS resources are correctly installed ‘custom-template-card’. I even uninstalled and reinstalled it again to be sure that the card is available.

Alright. There’s something programmatically wrong with the install. I’m not saying you did something wrong. But something isn’t playing nice in the background. And that’s way outside my league.

hi, when can i override the border radius theme (ios dark theme) inside of the card?
i can try whith the follow code, but it’s wrong. i can modify the border but not the radius of bar.

      card_mod:
        style: >
          bar-card-currentbar, bar-card-card, bar-card-contentbar,
          bar-card-backgroundbar, bar-card-background, bar-card-current  { 
            margin-left: 10px !important;
            margin-right: 20px !important;
            margin-bottom: 10px;
            border-radius: 0px;
            }
          bar-card-currentbar, bar-card-backgroundbar {
            border-radius: 0px;    
          }

or

      style: |
        bar-card-backgroundbar {
          border-radius: 0px;
        }

i would to find the border squared, but the ios dark blue theme.

i can try since 5 hours, but i wrong.

Hi guys,

short question: Is it possible to map the value or to show another value (like a helper entity)? I would like to use a string variant instead of the number. Like number 0-66 = ‘Good’.

Hi all,

Struggling to get the animation to work, eventually want it triggered based on binary sensor, but even the basic ‘on’ is not working for me at the moment… Any hints?

          - type: custom:config-template-card
            variables:
              charge_target: states['sensor.i5_m60_xdrive_charging_target'].state
            entities:
              - ${charge_target}
            card:
              type: custom:bar-card
              column: 1
              animation:
                state: 'on'
                speed: 2
              entities:
                - entity: sensor.i5_m60_xdrive_remaining_battery_percent
                  name: Battery
                  icon: mdi:ev-plug-ccs2
                  height: 40px
                  min: 0
                  max: 100
                  target: ${charge_target}
                  severity:
                    - color: Red
                      from: 0
                      to: 25
                    - color: Orange
                      from: 26
                      to: 49
                    - color: Green
                      from: 51
                      to: 100
              card_mod:
                style: |-
                  bar-card-currentbar, bar-card-backgroundbar {
                    border-radius: 12px;
                    border: 0px solid;    
                  }

Thanks for the very useful work! Tried to implement this card in a mushroom style dashboard, after some css tweaking this seems to work on a basic level. The standard mushroom collection doesn’t have a counter/gauge/severity tile, so I hope this tweak can be useful to some.

For anyone interested, my code for this card:

type: custom:bar-card
entities:
  - entity: counter.regenwater_filter
    icon: mdi:water-check
    positions:
      icon: outside
      indicator: 'off'
      minmax: 'off'
      name: 'off'
      value: 'off'
    min: 0
    max: 365
    target: 180
    height: 8
severity:
  - color: rgb(76,175,80)
    from: 0
    to: 179
  - color: rgb(255,152,0)
    from: 180
    to: 239
  - color: rgb(244,67,54)
    from: 240
    to: 365
card_mod:
  style: >
    {% set entity = { 
      "state": states('counter.regenwater_filter') | int(9999999999),
      "name": "Levensduur",
      "unit": " d"
      }
    %} {% set severity = { 
      "green": 0,
      "orange": 180,
      "red": 240
      }
    %} {% set colors = { 
      "green": "76,175,80",
      "orange": "255,152,0",
      "red": "244,67,54"
      }
    %}

    ha-card .card-content {
      padding: 12px!important;
      cursor: pointer;
    }

    ha-card {
      transition-duration: 0.05s;
    }

    ha-card:hover {
      {% if entity.state == 9999999999 %}
        background-color: rgba(200,200,200, 0.02);
      {% elif entity.state < severity.orange %}
        background-color: rgba({{colors.green}}, 0.02);
      {% elif entity.state < severity.red %}
        background-color: rgba({{colors.orange}}, 0.02);
      {%- else -%}
        background-color: rgba({{colors.red}}, 0.02);
      {%- endif %}
    }

    bar-card-background {
      margin-left: 13px !important;
    }

    bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar, 
    bar-card-targetbar {
      border-radius: 8px;
    }

    bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
    bar-card-targetbar, bar-card-animationbar {
      {% if entity.state == 9999999999 %}
        left: 1.5em !important;
        width: calc(100% - 1.5em);
      {% else %}
        {% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
        left: {{state_width}}em !important;
        width: calc(100% - {{state_width}}em);
      {%- endif %}
    } 

    bar-card-markerbar {
      display: none;
    } 

    bar-card-background::before {
      content: "{{ entity.name }}";
      display: flex;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      font-weight: 500;
      height: 20px;
      letter-spacing: 0.1px;
      line-height: 20px;
      margin-bottom: 6px;
    }

    bar-card-background::after {
      {% if entity.state == 9999999999 %}
        content: "N/A"
      {%- else %}
        content: "{{ entity.state }}{{ entity.unit}}";
      {%- endif %}
      font-family: Roboto, Noto, sans-serif;
      font-size: 12px;
      font-weight: 400;
      height: 16px;
      letter-spacing: 0.4px;
      line-height: 16px;
      display: inline-block;
      position: absolute;
      margin-top: -4px;
      width: fit-content;
    }

    bar-card-iconbar {
      {% if entity.state == 9999999999 %}
        color: rgba(200,200,200, 1);
        background-color: rgba(200,200,200, 0.2);
      {% elif entity.state < severity.orange %}
        color: rgba({{colors.green}}, 1);
        background-color: rgba({{colors.green}}, 0.2);
      {% elif entity.state < severity.red %}
        color: rgba({{colors.orange}}, 1);
        background-color: rgba({{colors.orange}}, 0.2);
      {%- else -%}
        color: rgba({{colors.red}}, 1);
        background-color: rgba({{colors.red}}, 0.2);
      {%- endif %}
      border-radius: 50%;
    }

7 Likes

Hello folks,
currently I am trying to build something like this (taken from Huawei Solar Dashboard)

Focus is at the bar graph itself.

Since ApexCharts for HA does - as far as I know - not support stacked bar graph like this I am currently using bar-card with card-mod and config-template-card [Actually the template card is in this state unnecessary, but it is still in for testing purpose]
However I am facing some issues.
This is what I currently have achieved (bottom 2 bars), using 2 templates to calculate the %-values.
grafik

Is there any way I can replace the displayed value for Min/Max (in this case 11% and 89 or 90%), without it affecting the bar length?
Because if I replace the MIN with config-template-card there is never a bar shown since the Min-value equals thecurrent value.

type: custom:config-template-card
variables:
  - states['sensor.pv_energy_daily'].state
entities:
  - ${vars[0].entity_id}
card:
  title: Version 3
  type: custom:bar-card
  decimal: 2
  positions:
    icon: 'off'
  entities:
    - entity: sensor.pv_energy_daily
    - entity: sensor.grid_export_energy_daily
      complementary: false
    - entity: sensor.home_selfuse_energy_daily
      complementary: false
      max: ${vars[0] }
    - entity: sensor.percent_selfuse_vs_export
      unit_of_measurement: '%'
      positions:
        icon: 'off'
        indicator: 'off'
        minmax: inside
        value: inside
        name: 'off'
        title: inside
    - entity: sensor.percent_export_vs_selfuse
      unit_of_measurement: '%'
      positions:
        icon: 'off'
        indicator: 'off'
        minmax: inside
        value: inside
        name: 'off'
        title: inside
  card_mod:
    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: -11px;
        margin-left: 
      }
      bar-card-name {
        margin: 0px;
      }
      bar-card-max {
        margin: 0px;
        margin-left: auto;
        margin-top: 0px;
        top: 10px;
        font-size: 15px
      }
      bar-card-min {
        margin: auto;
        margin-left: auto;
        margin-top: auto;
        top: 10px;
        font-size: 15px
      }
      bar-card-divider {
        display: none;
      }

Any help would be appreciated.

Is it possible to change the name within the Bar Card depending on the value of the Entity.

If negative then name ‘To Grid’ and if Positive then change the name to 'From Grid

Hi folks, I’m sharing a retro LED look for batteries level, all done in CSS.
edited : made it simpler thanks to @edwardtich for sharing is mask code which it’s based on.
Capture d’écran, le 2024-05-11 à 23.07.06
Capture d’écran, le 2024-05-11 à 23.06.47

Here’s the code:

######  Add those variables in your Theme


  alert-color: 178, 34, 34
  green-color: 34, 139, 34
  orange-color: 207, 91, 0
  yellow-color: 230, 187, 0

  battery-gradient-vertical: linear-gradient(360deg, rgba(var(--alert-color),1) 0%, rgba(var(--alert-color),1) 35%, rgba(var(--orange-color),1) 50%, rgba(var(--yellow-color),1) 65%, rgba(var(--green-color),1) 100%)
  battery-gradient-horizontal: linear-gradient(90deg, rgba(var(--alert-color),1) 0%, rgba(var(--alert-color),1) 35%, rgba(var(--orange-color),1) 50%, rgba(var(--yellow-color),1) 65%, rgba(var(--green-color),1) 100%)
  battery-mask-horizontal: repeating-linear-gradient( 90deg,  rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%)
  battery-mask-vertical: repeating-linear-gradient( 360deg,  rgba(0, 0, 0, 0.3) 0%, black 2%, rgba(0, 0, 0, 0.3) 4%, transparent 4%, transparent 5%)


  ######    Vertical Bar

type: custom:stack-in-card
cards:
  - type: custom:bar-card
    columns: 4
    decimal: 0
    entity_row: false
    positions:
      icon: outside
      name: 'off'
      minmax: 'off'
      indicator: 'off'
    direction: up
    height: 200px
    entities:
      - entity: sensor.energie_victron_chalet_state_of_charge
        name: Batteries
      - entity: sensor.energie_victron_chalet_battery_voltage
        name: Voltage
        decimal: 1
        min: 20
        max: 28
      - entity: sensor.energie_victron_chalet_amperage_restant_sur_416
        name: Ampérage
        max: 416
      - entity: sensor.energie_victron_chalet_wattage_restant_416
        name: Wattage
        icon: mdi:lightning-bolt
        max: 9984

    card_mod:
      style: |
        ha-card {
          background: black !important;
        }
        bar-card-backgroundbar {
          background: var(--battery-gradient-vertical);
          mask-image: var(--battery-mask-vertical);
          border-radius: 0px;
          filter: brightness(0.65);
          opacity: 0.35;
        }
        bar-card-currentbar {
          background: var(--battery-gradient-vertical);
          mask-image: var(--battery-mask-vertical);
          clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--bar-percent)), 0 calc(100% - var(--bar-percent)));
          border-radius: 0px;
        }
        bar-card-value {
          margin: 20px;
          font-size: 1.25rem;
          font-weight: 800;
        }
        ha-icon {
          color: var(--primary-text-color);
        }


    ######    Horizontal Bar


type: custom:stack-in-card
cards:
  - type: custom:bar-card
    columns: 1
    decimal: 0
    entity_row: false
    positions:
      icon: outside
      name: 'off'
      minmax: 'off'
      indicator: 'off'
    direction: right
    height: 60px
    entities:
      - entity: sensor.energie_victron_chalet_state_of_charge
        name: Batteries
      - entity: sensor.energie_victron_chalet_battery_voltage
        name: Voltage
        decimal: 1
        min: 20
        max: 28
      - entity: sensor.energie_victron_chalet_amperage_restant_sur_416
        name: Ampérage
        max: 416
      - entity: sensor.energie_victron_chalet_wattage_restant_416
        name: Wattage
        icon: mdi:lightning-bolt
        max: 9984
    card_mod:
      style: |
        ha-card {
          background: black !important;
        }
        bar-card-backgroundbar {
          background: var(--battery-gradient-horizontal);
          mask-image: var(--battery-mask-horizontal);
          border-radius: 0px;
          filter: brightness(0.65);
          opacity: 0.35;
        }
        bar-card-currentbar {
          background: var(--battery-gradient-horizontal);
          mask-image: var(--battery-mask-horizontal);
          clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
          border-radius: 0px;
        }
        bar-card-value {
          margin: 20px;
          font-size: 1.25rem;
          font-weight: 800;
        }
        ha-icon {
          color: var(--primary-text-color);
        }

3 Likes

Hi all,

Is there a way to round the number shown in bar-card? I am using it for air quality and I’d like the numbers be a whole number.

Thank you!

      - entity: sensor.solaredge_ac_power
        name: Solar Productie
        indicator: inside
        icon: mdi:solar-power-variant
        decimal: ''

really like the card from you. I tried to create a bar from 100 to 0 (%) from right to left but i dont get this working. Do you have a example code for this?

Glad you like it. It seems the bar Card isn’t able to show a right tot left bar, but i got it working by changing one css parameter, pretty much just flipping the bar horizontally.

Just add the following lines to the css selector already in the code:

bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar, 
    bar-card-targetbar {
      border-radius: 8px;
      -webkit-transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1);
    }

Also if you want to create a bar from right to left, just use
min: 100
max: 0

I finally got it working.
grafik

So I had to use Config-template-card to alter the values for Min, Max and Target.
When altering Min, Max the bar would never display, therefore I calculate a new value for the target value to indicate the percentage, in this case it was around 42 I think. So the target has to be set at 42 (from the 100-0 scale) to represent 71% length.

Here is the code for the sensor that I use as target value:
l is the left value, r the right.
the sensors I use for l and r are complementary, that means the always add up to 100. You probably can also do it with just one sensor and then just substract 100 for the other.

      - name: percent_calculated_bar
        unique_id: percent_calculated_bar
        state: >
          {% set l = states('sensor.percent_selfuse_vs_export')|float(0) %}
          {% set r = states('sensor.percent_export_vs_selfuse')|float(0) %}
          {% set m = ( ( states('sensor.percent_export_vs_selfuse')|float(0) - states('sensor.percent_selfuse_vs_export')|float(0))|abs)|round(0) %}

          {% if l > r %}
           {{  ( l - ( l * m / 100  )   )|round(0) }}
          {% endif %}

          {% if r >= l %}
           {{  ( l + ( l * m / 100 )   )|round(0) }}
          {% endif %}

The code of the card is as follows (did not mess with coloring yet):
Used cards apart from bar card are config-template-card and card-mod

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.solar_yield_energy_daily
    name: Energieertrag
    layout: vertical
    icon_type: none
    title: Custom Stack in
    card_mod:
      style: |
        :host {
          --stack-card-margin: 0px;
          --ha-card-border-radius: 0px;
          --ha-card-border-width: 0px;
          --ha-card-border-color: green
        } ha-card {
          margin: -10px        
        }
  - type: custom:config-template-card
    variables:
      - states['sensor.percent_export_vs_selfuse'].state
      - states['sensor.percent_selfuse_vs_export'].state
      - states['sensor.percent_calculated_bar'].state
    entities:
      - ${vars[0].entity_id}
      - ${vars[1].entity_id}
      - ${vars[2].entity_id}
    card:
      type: custom:bar-card
      decimal: 2
      entity_row: 3
      positions:
        icon: 'off'
      entities:
        - entity: sensor.percent_selfuse_vs_export
          unit_of_measurement: '%'
          max: ${vars[0] }
          min: ${vars[1] }
          target: ${vars[2] }
          positions:
            icon: 'off'
            indicator: 'off'
            minmax: inside
            value: 'off'
            name: 'off'
            title: inside
          color: green
      card_mod:
        style: |
          ha-card {
            border-top: 0px;
            border-bottom: 0px;
            border-width: 10px;
            border-color: transparent;
            border-radius: 5px;
            
            
          }
          .contentbar-direction-right {
           flex-direction: column;
          }
          :host {
            --stack-card-margin: 0px;


          }
          .min-direction-right {
            margin: 0px;
            margin-left: 4px;
            margin-right: auto;
            margin-bottom: -20px;
            bottom: 10px;
          }
            bar-card-value {
            margin: -11px;
            margin-left: 
          }
          bar-card-name {
            margin: 0px;
          }
          bar-card-markerbar {
            display: none;
          }
          bar-card-max {
            margin: 0px;
            margin-left: auto;
            margin-top: 0px;
            top: 10px;
            font-size: 15px;
            color: black;
          }
          bar-card-min {
            margin: auto;
            margin-left: auto;
            margin-top: auto;
            top: 10px;
            font-size: 15px;
            color: black
          }
          bar-card-currentbar {
            background: lightgreen;
          }
          bar-card-divider {
            display: none;
          }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.home_selfuse_energy_daily
        name: Eigenverbrauch
        icon_type: none
      - type: custom:mushroom-entity-card
        name: Netzeinspeisung
        icon_type: none
        alignment: end
        layout: vertical
        entity: sensor.grid_export_energy_daily
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                align-items: end;
              }
    card_mod:
      style: |
        :host {
          --stack-card-margin: 0px;
          --ha-card-border-radius: 0px;
          --ha-card-border-width: 0px;
          --ha-card-border-color: purple;
        } ha-card {
          border: true;
          border-width: 0px;
          stack-card-margin: 0px;
          border-color: blue;
          margin: -10px 0px -10px 0px
          
        }
card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
      --ha-card-border-radius: 0px;
      --ha-card-border-width: 0px;
      --ha-card-border-color: green
    } ha-card {
      border: true;
      border-width: 0px;
      stack-card-margin: px;
      border-color: red;
      box-shadow: none;
      padding-top: 0px;
      padding-bottm: 0px;
      margin: 
      
    }

Found one issue though. If both values are 50% the bar looks like this…
grafik

1 Like