card_mod:
style:
.: |
{%- for e in config.entities -%}
{% set val = states(e["entity"]) | float(0) | round(0) %}
bar-card-row:nth-child({{ loop.index }}) bar-card-iconbar {
{% if val >= 70 %}
color: red;
{% elif val >= 63 %}
color: blue;
{% else %}
color: yellow;
{% endif %}
}
{%- endfor %}
2 Likes
Home assistant 2025.5 seems to have broken my bar card implementation.
I think that border-radius is no longer applied so the card is rectangular instead of curved at the edges.
Admittedly it’s poorly styled, but I’ll appreciate any direction on how to rectify.
Code below is for the Bar Card section of a grid card used to achieve a particular nesting.
- type: custom:bar-card
max: 500
severity:
- from: 0
to: 50
color: lightgreen
- from: 51
to: 100
color: green
- from: 101
to: 150
color: yellow
- from: 151
to: 200
color: orange
- from: 201
to: 300
color: red
- from: 301
color: darkred
entities:
- entity: sensor.camden_kerbside_united_kingdom_air_quality_index
name: null
icon: mdi:circle
indicator: "off"
card_mod:
style: |
bar-card-card {
margin-left: -70px;
margin-top: -16px;
min-width: 236px;
}
ha-card {
border: none !important;
background: rgba(229, 229, 229, 0.15);
}
bar-card-currentbar {
border-radius: 33px 33px 33px 33px;
height: 80px;
opacity: 0.7;
margin-left: px;
margin-top: px;
transform: rotateY(180deg);
}
bar-card-backgroundbar {
background: transparent; %linear-gradient(to right, lightgreen 10%, green 20%, yellow 30%, orange 40%, red 60%, darkred)%
min-height: 80px;
}
bar-card-background {
background: rgba(255, 255, 255, 0.4);
border-radius: 33px 33px 33px 33px;
min-height: 80px;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1) !important;
}
bar-card-name {
font-size: 23px;
font-color: black;
opacity: 0;
font-weight: bold;
margin-top: 40px;
}
bar-card-value {
font-size: 23px;
font-color: black;
margin-top: 50px;
margin-right: 12px;
font-weight: bold;
opacity: 0;
}
ha-icon {
margin-left: 390px;
margin-top: 35px;
--mdc-icon-size: 49px;
--card-mod-icon-color: transparent;
opacity: 1;
}
Yeah, same problem here. I think it’s a bar height issue as the spacing has changed dramatically. Working on a fix and will post here if I figure something out.
Change all instances of
border-radius:
to
--bar-card-border-radius:
That worked for me.
The height of the bars was also broken for me (extra padding). I did a fix here: GitHub - spacerokk/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
1 Like
saved the day, thanks!
for bar-card-background I had to define both --bar-card-border-radius, and border-radius
Noticed an additional problem with mine, that the Graph Line extends beyond the boundaries of the card
Adding --bar-card-border-radius does help, but does not resolve the issue completely - see the orange vs red lines above.
type: custom:bar-card
entities:
- entity: sensor.pww1018041001257
icon: mdi:water-check
positions:
icon: outside
indicator: "off"
minmax: "off"
name: "off"
value: "off"
min: 0
max: 100
target: 100
height: 8
severity:
- color: rgb(76,175,80)
from: 76
to: 100
- color: rgb(255,152,0)
from: 50
to: 75
- color: rgb(244,67,54)
from: 0
to: 49.9
card_mod:
style: >
{% set entity = {
"state": states('sensor.pww1018041001257') | int(9999999999),
"name": "Water Level",
"unit": " %"
}
%} {% set severity = {
"red": 75,
"orange": 50,
"green": 25
}
%} {% set colors = {
"red": "76,175,80",
"orange": "255,152,0",
"green": "244,67,54"
}
%}
ha-card .card-content {
padding: 12px!important;
cursor: pointer;
}
ha-card {
transition-duration: 0.05s;
}
bar-card-background {
margin-left: 13px !important;
}
bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar,
bar-card-targetbar {
border-radius: 8px;
--bar-card-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%;
--bar-card-border-radius: 50%;
}
@arnocl this is based on your kindly shared code, are you seeing the same issue?
I had the same issue, I was able to resolve it by introducing a right element and changing the width to auto
change
bar-card-currentbar, bar-card-backgroundbar,
bar-card-contentbar, bar-card-targetbar, bar-card-animationbar {
{% if entity.state == 9999999999 %}
left: 1.5em !important;
right: 0.5em !important;
width: auto !important;
{% else %}
{% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
left: {{state_width}}em !important;
right: 0.5em !important;
width: auto !important;
{%- endif %}
}
1 Like
Thank you @jamiergrs that fixed it for me
Home assistant 2025.5
After update the gradient stopped working
type: custom:stack-in-card
cards:
- type: custom:bar-card
entities:
- entity: sensor.kachestvo_vozdukha_gostinaia_co2
icon: mdi:molecule-co2
name: []
align: split
columns: 1
height: 4px
width: 50%
animation:
state: "on"
speed: 2
attribute: null
color: white
decimal: 0
direction: right
positions:
icon: inside
indicator: inside
name: inside
minmax: "on"
value: inside
unit_of_measurement: null
max: 4000
min: 0
severity:
- color: "#c5e4ac"
from: "0"
to: "400"
- color: "#faedae"
from: "401"
to: "800"
- color: "#ffd1b1"
from: "801"
to: "1200"
- color: "#f0a994"
from: "1201"
to: "2000"
- color: "#e3d4f6"
from: "2001"
to: "4000"
card_mod:
style: |
ha-card {
border-radius: 2.5px;
border-width: 0px !important;
background: none;
border: none;
height: 38px;
}
ha-icon {
margin-top: -2px;
padding-right: 5px;
--mdc-icon-size: 20px;
color: red;
}
bar-card-indicator {
margin-top: -10px;
padding-right: 0px;
}
bar-card-name {
margin-top: 0px;
padding-left: 0px;
}
bar-card-backgroundbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-currentbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-targetbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-animationbar {
margin-top: 12px;
padding-right: 0px;
}
bar-card-targetmarker {
margin-top: 40px;
border-radius: 2.5px;
}
bar-card-value {
margin-top: 0px;
padding-left: 5px;
}
bar-card-row {
margin-bottom: 0px !important;
margin-top: -10px !important;
}
bar-card-backgroundbar {
background: linear-gradient(to right, green 20%, yellow 40%, orange 60%, red 80%, purple 100%);
border-radius: 25px;
}
bar-card-currentbar {
background: linear-gradient(to right, green 20%, yellow 40%, orange 60%, red 80%, purple 100%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 25px;
mask-image: repeating-linear-gradient( 90deg, transparent 0px, black 5px, transparent 0px, black 5px);
}
bar-card-contentbar {
font-size: 14px; color: white;
}
bar-card-value {
font-size: 14px; color: white;
}
card_mod:
style: |
ha-card {
height: 25px;
border: 0px;
background: transparent;
}
Hi, I strugled with same problem for a day and half.
Resolved it by prefixing bar-card-currentbar and bar-card-backgroundbar
with bar-card-background. Like this:
bar-card-background bar-card-currentbar {
2 Likes
yes it works
very strange but it also works like this
ha-card {
card_mod:
style: |
ha-card {
ha-icon {
margin-top: -2px;
padding-right: 5px;
--mdc-icon-size: 20px;
color: red;
}
Hi,
Is it possible to use the local decimal separator when displaying values? The bar card currently uses a period, which isn’t commonly used in my region. Home assistant shows the local separator when displaying the data.
There’s already a feature request on GitHub, but it’s almost two years old: [Feature Request] Change decimal separator to comma · Issue #170 · custom-cards/bar-card · GitHub
Does anyone have a solution for this?
Hello,
I have a problem with the margin, which I can’t reduce. I use the bar card within a custom grid layout, but unfortunately, with this thick border, the view is not really useful. I have tried the suggestions mentioned so far to eliminate the border, but without success.
Has anyone had the same problem and found a solution?
I would be very grateful :-).
Thanks J
e.g.:
style:
$: |
ha-card {
background: none;
box-shadow: none;
}