Lovelace: Bar Card

Noy1122 · September 22, 2024, 11:22am

I have a strange problem, could be a RTL problem or something like that,
As soon as I configure the HA system to the English language it works well, if I return the language to the Hebrew language the problem returns. Maybe someone knows this problem?
The problem exists on a Iphone device
I am attaching 2 photos.
Picture that doesn’t look right in Hebrew
Picture that it looks normal in English

and this the code of card

type: custom:bar-card
title: כמות האוכל של תמר השבוע 🍼
entities:
  - entity: sensor.kmvt_vkl_yvmyt_2
    name: היום
    color: lightblue
    icon: mdi:baby-bottle
    target: 400
  - entity: sensor.kmvt_vkl_yvm_tmvl_ml
    icon: mdi:baby-bottle
    name: אתמול
  - entity: sensor.kmvt_vkl_yvm_shlshvm_ml
    icon: mdi:baby-bottle
    name: שלשום
  - entity: sensor.kmvt_vkl_yvm_lpny_3_ymym_ml
    icon: mdi:baby-bottle
    name: לפני 3
  - entity: sensor.kmvt_vkl_yvm_lpny_4_ymym_ml
    icon: mdi:baby-bottle
    name: לפני 4
height: 300px
width: 100%
stack: horizontal
direction: up
icon: false
max: 600
show_values: true
positions:
  value: inside
  icon: inside
  name: outside
card_mod:
  style: |
    ha-card {
      --bar-card-border-radius: 30px;  # 
    }

Ildar_Gabdullin · September 22, 2024, 7:50pm

Tell me please what is an expected order for horizontal bars: left - from the 1st entity, right - from the last?

Noy1122 · September 23, 2024, 11:05am

English - left - from the 1st entity
Hebrew - right - from the last
but I dont care if it will be right - from the last
It doesn’t matter to me

Ildar_Gabdullin · September 23, 2024, 1:54pm

Ok, I will try to see what could be fixed - in ~10 days

Noy1122 · September 25, 2024, 5:03am

Thanks bro

Ildar_Gabdullin · September 30, 2024, 11:23pm

RTL + vertical bars:

Card:

  - <<: &ref_card
      type: custom:bar-card
      entities:
        - entity: input_number.test_level_1
          name: x1
        - entity: input_number.test_level_2
          name: x2
        - entity: input_number.test_level_3
          name: x3
        - entity: input_number.test_level_4
          name: x4
        - entity: input_number.test_level_5
          name: x5
      height: 300px
      stack: horizontal
      direction: up
    title: default

Displayed in English:

Displayed in RTL:

How to fix:

  - <<: *ref_card
    title: modded
    card_mod:
      style: |
        :dir(rtl) bar-card-card:not(:last-child) {
          margin-right: 0px;
          margin-left: 8px;
        }

Result in English - untouched:

Result in RTL - FIXED:

Noy1122 · October 6, 2024, 12:59pm

Thanks man its working!!

sskom · October 8, 2024, 12:50pm

Hello! Need advise how to make -100% +100% bar for charging-discharging. Both colors starting from the middle. Thanks!

lilp69 · October 10, 2024, 7:04am

Hi,
I wish know if it’s possible to show value in bard card by specific color.
For exemple, Bard card show text “Vent” if vent is yellow, “Pluie” if pluie is red, and “Vent et pluie” is both are different from green by differents sensors like : sensor.alerte_vagues_submersion

      - type: custom:bar-card
        entities:
          - entity: sensor.80_weather_alert
            name: Alerte Météo France
            height: 30px
            min: 0
            max: 4
            positions:
              indicator: "off"
              icon: "off"
            severity:
              - text: Vert
                color: green
              - text: Jaune
                color: yellow
              - text: Orange
                color: orange
              - text: Rouge
                color: red
              - text: unknow
                color: lightblue
        card_mod:
          style: >
            bar-card-currentbar, bar-card-backgroundbar {
              border-radius: 25px;
            }

            #states > bar-card-row > bar-card-card > bar-card-background >
            bar-card-contentbar > bar-card-name {
              font-size: 16px;
              font-weight: bold;
            }      ha-card {
              margin-top: -10px;
              background: none;
              border: none;
            }

Thanks.

sskom · October 10, 2024, 12:00pm

The only solution I found was to make two cards with the left one flipped. Is it possible to go further and put both groups of bars in one card without borders around those groups. Now I have #1 picture and want picture #2. Code is attached. Thank you!

      - type: horizontal-stack
        cards:
          - type: custom:bar-card
            entities:
              - entity: sensor.deye_sunsynk_sol_ark_current
              - entity: sensor.deye_sunsynk_sol_ark_current_2
              - entity: sensor.deye_sunsynk_sol_ark_current_3
              - entity: sensor.not_connected_current
              - entity: sensor.deye_sunsynk_sol_ark_x_2_battery_5_current
            icon: mdi:current-dc
            min: 0
            max: -65
            height: 25px
            title: "->"
            direction: right
            positions:
              indicator: "off"
              name: "off"
              value: "off"
              icon: "off"
            severity:
              - color: "#db4437"
                from: -65
                to: 0
            card_mod:
              style: |
                ha-card {
                  transform: scaleX(-1);
                  box-shadow: none;
                  margin: 0px;
                  padding: 0px;
                }
                bar-card-currentbar, bar-card-backgroundbar {
                  border-radius: 8px;
                  border: 0px solid;  
                }
          - type: custom:bar-card
            entities:
              - entity: sensor.deye_sunsynk_sol_ark_current
                name: 280
              - entity: sensor.deye_sunsynk_sol_ark_current_2
                name: 200
              - entity: sensor.deye_sunsynk_sol_ark_current_3
                name: 200
              - entity: sensor.not_connected_current
                name: 200
              - entity: sensor.deye_sunsynk_sol_ark_x_2_battery_5_current
                name: 230
            min: 0
            max: 65
            height: 25px
            title: "->"
            positions:
              indicator: "off"
              name: "off"
              icon: "off"
              value: inside
            severity:
              - color: "#43a047"
                from: 0
                to: 65
            card_mod:
              style: |-
                ha-card {
                  box-shadow: none;
                  margin: 0px;
                  padding: 0px;
                }
                bar-card-currentbar, bar-card-backgroundbar {
                  border-radius: 8px;
                  border: 0px solid;    
                }

Juu · October 16, 2024, 9:17am

Hello!
I am a new HA user, and I try to implement my dashboards. I made some searches for my problem, but didn’t found a solution (maybe I am the first one who want to do this )
I have 2 entities (settings coming from a thermometer) ‘number.temp_max’ (value is 21) and ‘number.temp_min’ (value is 18) that I would like to use inside the “severity” option.
In fact, I would like to replace

            from: 18
            to: 21

by something like

            from: number.temp_min
            to: number.temp_max

Is it possible, what is the good syntax?
I tried a lot of things without any success.

Thanks a lot!

Ildar_Gabdullin · October 16, 2024, 1:29pm

The simplest way for you could be using a forked version of bar-card.
Go to bar-card Github → Pull requests, there is a PR with this functionality. Or as a person who proposed a PR, he probably has a forked repo.

Juu · October 18, 2024, 9:37am

Thanks for the tip, I installed his fork but unfortunately it works only for min and max, not for severity

Schwippser · November 7, 2024, 9:09pm

Maybe this is a solution:

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      padding: 20px;
    }
mode: horizontal
keep:
  background: false
cards:
  - type: custom:bar-card
    animation:
      state: "on"
      speed: "2"
    name: Nulleinspeisung
    width: 100%
    height: 50px
    min: "0"
    max: "-300"
    entity_row: true
    severity:
      - color: rgb(var(--mush-rgb-red))
        from: -300
        to: -40
      - color: rgb(var(--mush-rgb-orange))
        from: -39
        to: -20
      - color: rgb(var(--mush-rgb-green))
        from: -19
        to: -0.1
      - from: 0.1
        to: 2100
        hide: true
    positions:
      icon: "off"
      indicator: "on"
      name: "off"
      value: "off"
    entities:
      - entity: sensor.testsensor
        target: -0.1
    card_mod:
      style: |
        ha-card {
          background-color: red;
          border: 1px dotted;
          border-left: 2px solid;
          border-color: white;
          margin-right: -4px !important;
          transform: rotate(180deg);
          --bar-card-border-radius: 0px;
          --mush-rgb-red: 244, 67, 54;
          --mush-rgb-pink: 233, 30, 99;
          --mush-rgb-purple: 156, 39, 176;
          --mush-rgb-deep-purple: 103, 58, 183;
          --mush-rgb-indigo: 63, 81, 181;
          --mush-rgb-blue: 33, 150, 243;
          --mush-rgb-light-blue: 3, 169, 244;
          --mush-rgb-cyan: 0, 188, 212;
          --mush-rgb-teal: 0, 150, 136;
          --mush-rgb-green: 76, 175, 80;
          --mush-rgb-light-green: 139, 195, 74;
          --mush-rgb-lime: 205, 220, 57;
          --mush-rgb-yellow: 255, 235, 59;
          --mush-rgb-amber: 255, 193, 7;
          --mush-rgb-orange: 255, 152, 0;
          --mush-rgb-deep-orange: 255, 87, 34;
          --mush-rgb-brown: 121, 85, 72;
          --mush-rgb-grey: 158, 158, 158;
          --mush-rgb-blue-grey: 96, 125, 139;
          --mush-rgb-black: 0, 0, 0;
          --mush-rgb-white: 255, 255, 255;
        }

        bar-card-backgroundbar {
          opacity: 0.0;
          filter: brightness(1);
          border-radius: 0px;
          border: 1px dotted;
          border-color: white

        }
  - type: custom:bar-card
    animation:
      state: "on"
      speed: "2"
    name: Nulleinspeisung
    width: 100%
    height: 50px
    min: "0"
    max: "300"
    entity_row: true
    severity:
      - color: rgb(var(--mush-rgb-green))
        from: 0
        to: 19
      - color: rgb(var(--mush-rgb-orange))
        from: 20
        to: 39
      - color: rgb(var(--mush-rgb-red))
        from: 40
        to: 300
      - from: 0.1
        to: -2100
        hide: true
    positions:
      icon: "off"
      indicator: "on"
      name: "off"
      value: "off"
    entities:
      - entity: sensor.testsensor
        target: -0.1
    card_mod:
      style: |
        ha-card {
          background-color: red;
          border: 1px dotted;
          border-left: 2px solid;
          border-color: white;
          margin-left: -4px !important;
          --bar-card-border-radius: 0px;
          --mush-rgb-red: 244, 67, 54;
          --mush-rgb-pink: 233, 30, 99;
          --mush-rgb-purple: 156, 39, 176;
          --mush-rgb-deep-purple: 103, 58, 183;
          --mush-rgb-indigo: 63, 81, 181;
          --mush-rgb-blue: 33, 150, 243;
          --mush-rgb-light-blue: 3, 169, 244;
          --mush-rgb-cyan: 0, 188, 212;
          --mush-rgb-teal: 0, 150, 136;
          --mush-rgb-green: 76, 175, 80;
          --mush-rgb-light-green: 139, 195, 74;
          --mush-rgb-lime: 205, 220, 57;
          --mush-rgb-yellow: 255, 235, 59;
          --mush-rgb-amber: 255, 193, 7;
          --mush-rgb-orange: 255, 152, 0;
          --mush-rgb-deep-orange: 255, 87, 34;
          --mush-rgb-brown: 121, 85, 72;
          --mush-rgb-grey: 158, 158, 158;
          --mush-rgb-blue-grey: 96, 125, 139;
          --mush-rgb-black: 0, 0, 0;
          --mush-rgb-white: 255, 255, 255;
        }

        bar-card-backgroundbar {
          opacity: 0.0;
          filter: brightness(1);
          border-radius: 0px;
          border: 1px dotted;
          border-color: white
        }

ferbulous · November 8, 2024, 10:04am

Hi, thanks for this great visual bar display.
I’d like to ask ould I overlay number entities (threshold) as limit for the same bar graphs like in this video?

number.mmwave_g0_still_threshold_2
number.mmwave_g1_still_threshold_2
number.mmwave_g2_still_threshold_2
number.mmwave_g3_still_threshold_2
number.mmwave_g4_still_threshold_2
number.mmwave_g5_still_threshold_2
number.mmwave_g6_still_threshold_2
number.mmwave_g7_still_threshold_2
number.mmwave_g8_still_threshold_2

type: custom:bar-card
title: Still Energy
direction: up
columns: 9
height: 100px
width: 100%
positions:
  icon: "on"
  name: none
  indicator: "on"
  value: inside
entities:
  - entity: sensor.mmwave_g0_still_energy_2
  - entity: sensor.mmwave_g1_still_energy_2
  - entity: sensor.mmwave_g2_still_energy_2
  - entity: sensor.mmwave_g3_still_energy_2
  - entity: sensor.mmwave_g4_still_energy_2
  - entity: sensor.mmwave_g5_still_energy_2
  - entity: sensor.mmwave_g6_still_energy_2
  - entity: sensor.mmwave_g7_still_energy_2
  - entity: sensor.mmwave_g8_still_energy_2

Currrently mine looks like this

Ildar_Gabdullin · November 8, 2024, 11:26am

Probably you need to use a “target” option.

ferbulous · November 8, 2024, 12:10pm

Hi, I tried adding target with the numbers entity for the first 4 bar graphs but I don’t think I’m configuring this correctly

type: custom:bar-card
title: Still Energy
direction: up
columns: 9
height: 100px
width: 100%
positions:
  icon: "on"
  name: none
  indicator: "on"
  value: inside
entities:
  - entity: sensor.mmwave_g0_still_energy_2
    positions:
      minmax: inside
    entity_row: true
    target: number.mmwave_g0_still_threshold_2
  - entity: sensor.mmwave_g1_still_energy_2
    positions:
      minmax: inside
    entity_row: true
    target: number.mmwave_g1_still_threshold_2
  - entity: sensor.mmwave_g2_still_energy_2
    positions:
      minmax: inside
    entity_row: true
    target: number.mmwave_g2_still_threshold_2
  - entity: sensor.mmwave_g3_still_energy_2
    positions:
      minmax: inside
    entity_row: true
    target: number.mmwave_g3_still_threshold_2
    type: 'custom:bar-card'
  - entity: sensor.mmwave_g4_still_energy_2
  - entity: sensor.mmwave_g5_still_energy_2
  - entity: sensor.mmwave_g6_still_energy_2
  - entity: sensor.mmwave_g7_still_energy_2
  - entity: sensor.mmwave_g8_still_energy_2

Ildar_Gabdullin · November 8, 2024, 12:30pm

Does Docs say about a possibility to use entities for the “target” option? Guess no…

ferbulous · November 8, 2024, 2:17pm

It does mention number but I only see example for a fixed value.
Or is there another way around this?

Ildar_Gabdullin · November 8, 2024, 8:11pm

It does clearly say “number” in a table of properties - which is “123”.
Your workaround is either using a forked version of this card supporting entities for this property (if this fork exists) or using a custom card supporting templates like config-template-card etc.