Lovelace: Bar Card

Hello,

I would like to have horizontal bar with value in the middle inside the bar and name of entity under the bar in the middle. I think it is obvious but I can’t find solution. Any suggestions ?

I found it in HACS and installed it about 15 minutes ago. It’s working well. I just have rounded ends on the bars (no CSS), and I don’t know why when every image I see shows squared-off bar ends.

EDIT: Ahh. I have bar height set to 30px, which means the radius on the bar corners makes them look completely round. I was able to customize with card mod.

Is it possible to set the max value dynamically when using auto entities? I want to show the power usage of my smart sockets and set the max value to the value of the socket that is consuming the most power.

Here’s what I have with a static max value:


type: custom:auto-entities
show_empty: false
card:
  type: custom:bar-card
  direction: right
  entity_row: true
  min: 0
  max: 14
  height: 20px
  stack: vertical
  decimal: 1
  positions:
    icon: 'off'
    indicator: outside
    name: inside
    value: inside
  severity:
    - color: '#a1a1a18a'
      from: 0
      to: 2
    - color: '#3ea8328a'
      from: 2
      to: 10
    - color: '#85a8328a'
      from: 10
      to: 50
    - color: '#a8a4328a'
      from: 50
      to: 200
    - color: '#a887328a'
      from: 200
      to: 500
    - color: '#a867328a'
      from: 500
      to: 1000
    - color: '#a846328a'
      from: 1000
      to: 3000
    - color: '#a832328a'
      from: 3000
      to: 10000
filter:
  include:
    - entity_id: sensor.socket_*_power*
  exclude:
    - entity_id: sensor.*_kilowatt
sort:
  method: state
  reverse: true
  numeric: true

Hei all, thanks firstly for the awesome content here, helped me loads!

Now My issue is: I have a picture elements card where I want to present the SOC of my vehicle. When charging, I want to animate the bar. I already copied some code snippets from you guys, but I cant seem to style my bar card with css and perform the positioning:

Code for now:

type: picture-elements
elements:
  - type: state-icon
    entity: sensor.xxxxxxx_car
    tap_action:
      action: call-service
      service: smarteqconnect.preheat_start
      data:
        vin: xxxxxxxxxxxxxxxxx
      target: {}
    icon: mdi:heat-wave
    style:
      top: 60%
      left: 50%
      '--mdc-icon-size': 110%
  - type: custom:bar-card
    entity: sensor.xxxxxxx_state_of_charge
    name: Ladezustand
    color: rgb(186,166,142)
    icon: 'No'
    entity_row: true
    unit_of_measurement: '%'
    indicator: 'on'
    animation: 'on'
    positions:
      indicator: outside
      value: inside
    style:
      top: 90%
      left: 50%
      width: 60%
image: /local/smartfortwo.png

So when I now add the animation source code or something like:

style: |
        bar-card-row bar-card-card:nth-of-type(1) {
          --bar-card-color: green;
        }
        bar-card-row bar-card-card:nth-of-type(2) {
          --bar-card-color: red;
        }

Nothing works anymore, and my “top” and “Left” Positioning is not possible. When I delete top and left positioning, my bar disappears on the picture elements card… Could someone help me out here perhaps? Would be awesome!

1 Like

I just realized that this card doesn’t represent data accurately anymore. I assume since support stopped in 2020 things have broken?

Data should be 572, but its sitting at 451gb and randomly changes, sometimes going down.
Clikcing on the graph to get the history shows the correct history graph, but the bar graph still show incorrect information

image

I don’t understand much about CSS. But it seems I was able to make a gradient bar. Changed the percentage of steps in the gradient for clarity.

LsUbT6M

style: |-
  bar-card-backgroundbar {
    background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
  }
  bar-card-currentbar {
    background: linear-gradient(to right, green 5%, yellow 15%, orange 35%, red 85%);
    clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
  }

My original percentages: green 40%, yellow 55%, orange 70%, red 85%.

7 Likes

Hi

Did you get a solution for this?

I have also been thinking about it - to show net power Grid activity (import/purchase vs export/generation) and could not find an easily identifiable solution from other posts in this thread - though may have missed something.

3 possible ideas come to mind (not tested/proved yet):

1 - use a background colour for values less than zero, and make the target zero. Then apply the ‘negative’ severity colour to the target [this is the bit i cannot find - can you set the specific target colour in the config?] Then as the bar recedes below zero it will reveal the negative colour as if it is moving from the centre.
2 - Maybe use the gradient fill idea from Lovelace: Bar Card - #720 by RavingRobot post; I have only just seen this so it likely needs checking as appropriate for your/mine situation.
3 - The other idea that looks worth investigating is the hide option, that was explained elsewhere (create 2 bars, one for positive, other for negative, one from left other from right), effectively only showing positive or negative according to the entity value. Without a target colour setting, this looks like the fallback.

H

Hi, I’m playing around with this card and have a few questions

  • How can I put the indicator just before the measured value?
  • Is it also possible to make the up arrow red and the down arrow blue?
  • is there a possibility that the arrow always remains visible with the last value.

Did you make any progress here? I’m trying to add a template value to the “max” but it only seems to accept actual numbers…

I am looking for the exact same. Have you made any progress? TIA

No, No solution yet. Using a static max value for now.

Hi All!

I’m trying to stack together 2 elements inside my custom:button-card card and one element is a vertical bar-card, but this is what I get:
image

Do you have any suggestions on why the bar card is right shifted? This is the piece of code for the card

custom_card_nik_water:
  template:
    - "ulm_language_variables"
  triggers_update: "all"
  show_icon: false
  show_name: false
  show_label: false
  variables:
    ulm_custom_card_nik_water_status: "[[[ return variables.ulm_custom_card_nik_water_status ]]]"
    ulm_custom_card_nik_water_liter_sensor: "[[[ return variables.ulm_custom_card_nik_water_liter_sensor ]]]"
  styles:
    grid:
      - grid-template-areas: >
          [[[
            var areas = [];
            areas.push("item1 item1");
            return "\"" + areas.join("\" \"") + "\"";
          ]]]
      - grid-template-columns: "auto"
      - grid-template-rows: "min-content"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    item1:
      card:
        type: horizontal-stack
        cards:
          - type: custom:bar-card
            entity: sensor.disk_use_percent
            direction: up
            height: 100px
            width: 100px
            positions:
              icon: outside
              title: 'off'
              name: 'off'
              indicator: 'off'
            color: var(--google-blue)
            icon: mdi:water-pump
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 50%;
                  box-shadow: none;
                  background-color: transparent;
                  }
          - type: button
            tap_action:
              action: toggle
            entity: sensor.disk_use_percent
            name: M3
            hold_action:
              action: none
            show_state: true
            icon: mdi:water
            show_name: true
            show_icon: true
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  background-color: transparent;
                  icon-color: blue;
                }

I think it’s something related with Styles…Thanks for any suggestions

BR

Nik

Hey, is there a way to adjust the height of the gaps between the rows,so they appear more narrow?image

Probably similarly to rows in a conventional Entities card.
Go to card-mod thread - 1st post - link at the bottom - styles for Entities card.

have this simple bard-card config, which I had hoped to be picking up the configured attributes value of a binary_sensor:

  - type: custom:bar-card
    title: Kans op zon
    card_mod:
      class: class-header-margin
      style: |
        ha-card {
          box-shadow: none;
          margin: 0px -16px -16px -16px;
        }
#     hours_to_show: 24
#     update_interval: 30
#     smoothing: true
    show:
      labels: true
    severity:
      - color: Grey
        from: 0
        to: 25
      - color: Skyblue
        from: 26
        to: 50
      - color: Gold
        from: 51
        to: 100
    entities:
      - entity: binary_sensor.knmi_zon
        name: Vandaag
        type: attribute
        attribute: Zonkans vandaag
      - entity: binary_sensor.knmi_zon
        name: Morgen
        type: attribute
        attribute: Zonkans morgen
      - entity: binary_sensor.knmi_zon
        name: Overmorgen
        type: attribute
        attribute: Zonkans overmorgen

as I can observe, the actual value is noticed fine, and displayed inside the bar, however, the colors and the graphs are not using that value so it seems.

is there a way I can force it to use the attributes as configured in the entity list?

I noticed I used the HA Dashboard technique if showing an attribute (type: attribute). Bar-card can do that on its own, using:

    entities:
      - entity: binary_sensor.knmi_zon
        name: Vandaag
        attribute: Zonkans vandaag
      - entity: binary_sensor.knmi_zon
        name: Morgen
        attribute: Zonkans morgen
      - entity: binary_sensor.knmi_zon
        name: Overmorgen
        attribute: Zonkans overmorgen

yet, there is still no coloring according to that attribute

also tried to set the severity in each entity:

    entities:
      - entity: binary_sensor.knmi_zon
        name: Vandaag
        attribute: Zonkans vandaag
        <<: &severity
          severity:
            - color: Grey
              from: 0
              to: 25
            - color: Skyblue
              from: 26
              to: 50
            - color: Gold
              from: 51
              to: 100
      - entity: binary_sensor.knmi_zon
        name: Morgen
        attribute: Zonkans morgen
        <<: *severity
      - entity: binary_sensor.knmi_zon
        name: Overmorgen
        <<: *severity
        attribute: Zonkans overmorgen

yet the issue remains.

update

seems to be cause by the fact the attribute contains the unit, so the bar-card sees 99%, instead of 99…
filed an issue in the repo KNMI for that

is this card still maintained at all?

seems that with a last merged PR some 2 years ago there is not a lot of activity going forward…
would anyone know of an active Fork? or alternative…?

sorry, i have no answer to your question, but i´d like to know, how you reduced the height of the rows, including the gaps between them.
I managed to adjust the height, but the result is, that the gaps become bigger.
The actual size of the card does not change.

Hi all, I need help to customize my bar card. I need to center title header ad round square the bar. I don’t know how to combine the styles.
Here is the code to title center:

type: custom:bar-card
title: Consumo Istantaneo
show_icon: true
name: ' '
max: 4100
positions:
  indicator: inside
  value: inside
unit_of_measurement: W
entities:
  - entity: sensor.sensore_potenza_casa_w
card_mod:
  style:
    $: |
      .card-header {
        text-align: center;
      }

this to round style the bar but I have to remove “card_mod”:

style: |
  bar-card-currentbar, bar-card-backgroundbar {
    border-radius: 10px;
  }
  - type: custom:bar-card
    direction: right
    height: 10px
    width: 76px
    style:
      left: 28.5%
      top: 58%
    card_mod:
      style: |
        ha-card {
          --ha-card-border-radius: 0%;
          box-shadow: none;
          background-color: transparent;
          }

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