Does this still work? I’m unable to find the .js file on the github link and the recommended installation says to use HACS but it’s not in HACS.
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
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.
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:
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?
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;
}