Lovelace: Bar Card

Hello, I’m looking for a way to display this chart as in the example. In addition to the actual values, the aim is to show the upper and lower limits. So far I have only found the possibility to change the colors via severity or to specify a target value with “target”. But I don’t know how to implement several different ranges.


Thanks a lot in advance.

Good morning all,
I am trying to change the color of the icon of my sensor (not binary.sensor) for example to blue. I have tried a lot of things, but I can’t find a solution. Do you have an idea ?


Thanks a lot in advance

Hi guys,

In a disk %age usage bar card, I would like to display the actual value of the free disk space.

Something like: Free space: 62GB/212,0G (Usage: 69%)

Is that doable?

(Sorry if the question is not clear)

No comments? Ideas?

Hi, use custom:mod-card can solve this.

      style: |-
        ha-icon {
          color: white;
          background: none;
        }

1 Like

Some tricks with the card - displaying TWO text lines:
image
This is implemented by the decl_bar_additional_info decluttering card with the aid of card-mod.
How to use:

      - type: custom:decluttering-card
        template: decl_bar_additional_info
        variables:
          - SENSOR_USAGE: sensor.iiyama_ohm_ssd_corsair_load_used_space
          - VALUE_TEXT_1: 968 GB
          - VALUE_TEXT_2: Samsung HD204UI
decl_bar_additional_info:
  default:
    - VALUE_TEXT_2: ''
  card:
    type: custom:mod-card
    card:
      type: custom:decluttering-card
      template: decl_bar_usage
      variables:
        - SENSOR_USAGE: '[[SENSOR_USAGE]]'
        - VALUE_NAME: '[[VALUE_TEXT_1]]'
    card_mod:
      style:
        decluttering-card $ bar-card $: |
          bar-card-name {
            line-height: 1.1rem;
          }
          bar-card-name::after {
            content: "{% set CONTENT = '\A ' + '[[VALUE_TEXT_2]]' -%}
                      {{ CONTENT }}";
            white-space: pre;
            font-size: 0.8rem;
          }

Internally using the decl_bar_usage template:

decl_bar_usage:
  default: &ref_default
    - VALUE_NAME: ''
    - VALUE_SHOW_NAME: inside
    - VALUE_SHOW_STATE: inside
    - VALUE_COLOR_1: green
    - VALUE_COLOR_2: orange
    - VALUE_COLOR_3: red
    - VALUE_LIMIT_1: 33
    - VALUE_LIMIT_1_1: 34
    - VALUE_LIMIT_2: 66
    - VALUE_LIMIT_2_1: 67
  card:
    type: custom:bar-card
    entity: '[[SENSOR_USAGE]]'
    name: '[[VALUE_NAME]]'
    icon: ''
    unit_of_measurement: ''
    direction: right
    entity_row: true
    height: 40px
    width: 100%
    color: ''
    complementary: false
    decimal: 0
    target: 0
    limit_value: false
    min: '0'
    max: '100'
    severity:
      - color: '[[VALUE_COLOR_1]]'
        from: 0
        to: '[[VALUE_LIMIT_1]]'
        icon: ''
        hide: false
      - color: '[[VALUE_COLOR_2]]'
        from: '[[VALUE_LIMIT_1_1]]'
        to: '[[VALUE_LIMIT_2]]'
        icon: ''
        hide: false
      - color: '[[VALUE_COLOR_3]]'
        from: '[[VALUE_LIMIT_2_1]]'
        to: 100
        icon: ''
        hide: false
    positions:
      icon: 'off'
      indicator: 'off'
      name: '[[VALUE_SHOW_NAME]]'
      minmax: 'off'
      value: '[[VALUE_SHOW_STATE]]'
    animation:
      state: 'off'
      speed: 3

Surely the same technics may be used to display last-changed for the sensor:

image

decl_bar_additional_info__last_changed:
  card:
    type: custom:mod-card
    card:
      type: custom:decluttering-card
      template: decl_bar_usage
      variables:
        - SENSOR_USAGE: '[[SENSOR_USAGE]]'
        - VALUE_NAME: '[[VALUE_TEXT_1]]'
    card_mod:
      style:
        decluttering-card $ bar-card $: |
          bar-card-name {
            line-height: 1.1rem;
          }
          bar-card-name::after {
            content: "{% set SENSOR_NAME = '[[SENSOR_USAGE]]' -%}
                      {%- if not states(SENSOR_NAME) in ['unavailable','unknown'] -%}
                        {%- set DOMAIN = SENSOR_NAME.split('.')[0] -%}
                        {%- set SENSOR_NAME = SENSOR_NAME.split('.')[1] -%}
                        {%- set LAST_CHANGED = states[DOMAIN][SENSOR_NAME].last_changed -%}
                        {%- set LAST_CHANGED_FORMATTED = relative_time(LAST_CHANGED) -%}
                        {%- set LAST_CHANGED_FORMATTED = '\A '+LAST_CHANGED_FORMATTED+' ago' -%}
                      {%- else -%}
                        {%- set LAST_CHANGED_FORMATTED = '' -%}
                      {%- endif -%}
                      {{ LAST_CHANGED_FORMATTED }}";
            white-space: pre;
            font-size: 0.8rem;
          }

Update 26.05.22: changed a code for decl_bar_usage - removed mod-card.

2 Likes

After searching and searching I can’t find it: How can the bar-card be installed manually?
That is, installing it without HACS.

I wanted to put entities and bar-enties into the same card. I tried using the example from the readme, by using an entities type card and set the type of one of my entities to custom:bar-card. which does properly add the bar, but results in a different styling (padding around the whole row + different distance between text and icon)

The readme’s example looks like this though: https://github.com/custom-cards/bar-card/raw/master/images/entity_row.gif?raw=true

Before filing an actual issue, I’d like to know if there’s a different way to combine normal antities and bars into one card.

Try using entity_row: true option

Good tip, thanks! I missed that property.

Unfortunately, it doesn’t seem to fix it completely yet. There’s still a misalignment when using width. As you can see, the lower “storage used” has a different distance to the name/label.

One of my bars (Pollution) are of numeric value.
Is it possible to use CSS Elements to change the value to text depending on the numeric values ,and if so, how?

 style: |
          :card {
            --card-value:
              {% set  temp = state_attr('air_quality.nmi_outside','air_quality_index')|float %}
              {% if   temp > 0 %} Low
              {% elif temp > 3 %} Medium
              {% elif temp > 6 %} High
              {% elif temp > 9 %} Severer
              {% endif %}
              ;
          }

image

1 Like

My usage of this card is rudimentry…

type: custom:bar-card
entities:
  - entity: sensor.baby_room_window_sensor_power
  - entity: sensor.cadenza_motion_sensor_power
  - entity: sensor.deck_back_door_sensor_power
  - entity: sensor.dresser_motion_sensor_738d0b01_power
...

Is there a way to auto populate the entities… example:

{% for state in states.sensor | selectattr('attributes.device_class', '==', 'battery') %}
  {% if 0 <= state.state | int(-1) %}
    {{ state.entity_id }}
  {% endif %}
{% endfor %}

Yes, your code works in my setup:

    type: custom:auto-entities
    card:
      type: custom:bar-card
    show_empty: false
    filter:
      template: >-
        {% for state in states.sensor | selectattr('attributes.device_class', '==', 'battery') %}
          {% if 90 <= state.state | int(-1) %}
            {{ state.entity_id }}
          {% endif %}
        {% endfor %}

Gives a list of batteries >= 90% (if “90” is specified).

Thank you so much. This is definitely one of the things I find tricky to do on HA as a noob. I didn’t identify that type in auto entities could be bar-card.

So this

type: custom:auto-entities
card:
  type: custom:bar-card
  icon: mdi:battery
  positions:
    icon: 'off'
    indicator: inside
    name: inside
  severity:
    - color: Red
      from: 0
      to: 25
    - color: Orange
      from: 26
      to: 50
    - color: Green
      from: 51
      to: 100
  columns: 1
show_empty: false
filter:
  template: >-
    {% for state in states.sensor | selectattr('attributes.device_class', '==',
    'battery') %}
        {{  state.entity_id }}
    {% endfor %}

yields the following

which mostly meets my needs.

Does someone know how to significantly reduce font size to fit the long names… I’m maybe hoping for 2 columns OR, is there a way to select the entities friendly_name which would remove "Hash Power " from each of the entities listed

1 Like

I am pretty sure I am being stupid, but I can’t for the life of me get the text in the individual bars to change style. Can anyone help? Tried the code below and a whole pile of variations on a theme including putting styles against the various entities but nothing seems to change the font. Would like to centralise the text too.

Card-mod is installed

If anyone is interested it is linked to the excellent sensors for zwift and is a power meter for my home cycling setup.

Thanks!

image

type: custom:bar-card
color: rgba(117,189,111,1.0)
stack: horizontal
style: |-
  bar-card-name{
    margin-right: auto;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px #0005;
  }
positions:
  icon: 'off'
  title: 'off'
  name: inside
  value: 'off'
  indicator: 'off'
entities:
  - entity: sensor.zwift_power_215592
    color: rgb(127, 127, 127)
    name: Active Recovery
    min: 56
    max: 125
  - entity: sensor.zwift_power_215592
    color: rgb(55, 138, 245)
    name: Endurance
    min: 125
    max: 171
  - entity: sensor.zwift_power_215592
    color: rgb(89, 189, 89)
    name: Tempo
    min: 171
    max: 206
    bar_style:
      font-size: 50%
  - entity: sensor.zwift_power_215592
    color: rgb(248, 204, 68)
    name: Threshold
    min: 206
    max: 240
  - entity: sensor.zwift_power_215592
    color: rgb(237, 99, 52)
    name: VO2 Max
    min: 240
    max: 275
  - entity: sensor.zwift_power_215592
    color: rgb(236, 49, 35)
    name: Anaerobic
    min: 275
    max: 338
  - entity: sensor.zwift_power_215592
    color: rgb(236, 49, 35)
    name: Neuromuscular
    min: 338
    max: 1500

Any ideas how to use templates in bar-card? I want the target to show the max entity. Is it at all possible to use templates in this card?

type: custom:bar-card
entities:
  - name: Badet
    target: "{{ 'states('sensor.badet_gulvvarme_electric_consumption_max' ) }}"
    unit_of_measurement: w
    entity: sensor.badet_gulvvarme_electric_consumption_w
    icon: mdi:shower
1 Like

Put the card into config-template-card

1 Like

Brilliant! That did the trick. Thanks

I’m looking to have a graph (0-100%) showing the current progress of my washing machine, but with a little twist.
Instead of a static name I would like to show time remaining, something I get from a template.

Would it be possible todo this?