Wow. This is very, very nice.
Thank you.
Hi all, is it possible to set the āmaxā out from a value of a sensor? I would like to use to sensor in the top (consumption) as max for all of them. Many thanx in advance.
Hi,
I donāt think this is possible natively. However, it can be achieved by combining your bar-card with a config-template-card.
1 Like
Thank you. I will look into this
I have a strange behavior. One of my bars disappears completely when it goes to a negative value, even though I have a negative min value defined. Any ideas why this might happen?
Hereās my config:
- type: custom:bar-card
positions:
indicator: off
value: inside
title: off
name: outside
icon: inside
animation:
state: on
direction: up
height: 100px
width: 22px
columns: 9
stack: horizontal
min: -5
max: 35
entities:
- sensor.weatherflow_forecast_0
- sensor.weatherflow_forecast_1
- sensor.weatherflow_forecast_2
- sensor.weatherflow_forecast_3
- sensor.weatherflow_forecast_4
- sensor.weatherflow_forecast_5
- sensor.weatherflow_forecast_6
- sensor.weatherflow_forecast_7
- sensor.weatherflow_forecast_8
# - sensor.weatherflow_forecast_9
# - sensor.weatherflow_forecast_10
# - sensor.weatherflow_forecast_11
severity:
- color: rgb(242,249,255)
from: -30
to: -17
- color: rgb(228,242,254)
from: -17
to: -15.5
- color: rgb(215,236,254)
from: -15.5
to: -14.5
- color: rgb(201,229,253)
from: -14.5
to: -13.5
- color: rgb(187,223,253)
from: -13.5
to: -12
- color: rgb(173,216,252)
from: -12
to: -11
- color: rgb(159,210,252)
from: -11
to: -10
- color: rgb(145,203,251)
from: -10
to: -9
- color: rgb(131,197,250)
from: -9
to: -8
- color: rgb(117,190,249)
from: -8
to: -6.5
- color: rgb(103,184,248)
from: -6.5
to: -5.5
- color: rgb(89,177,247)
from: -5.5
to: -4.5
- color: rgb(75,171,246)
from: -4.5
to: -3.5
- color: rgb(61,164,245)
from: -3.5
to: -2
- color: rgb(47,157,244)
from: -2
to: -1
- color: rgb(33150243)
from: -1
to: 0
- color: rgb(44,153,234)
from: 0
to: 1
- color: rgb(55,157,224)
from: 1
to: 2
- color: rgb(66,160,215)
from: 2
to: 3.5
- color: rgb(77,164,205)
from: 3.5
to: 4.5
- color: rgb(88,167,196)
from: 4.5
to: 5.5
- color: rgb(99,171,186)
from: 5.5
to: 6.5
- color: rgb(110,174,177)
from: 6.5
to: 8
- color: rgb(121,178,168)
from: 8
to: 9
- color: rgb(132,181,159)
from: 9
to: 10
- color: rgb(143,185,150)
from: 10
to: 11
- color: rgb(154,188,141)
from: 11
to: 12
- color: rgb(165,192,132)
from: 12
to: 13
- color: rgb(176,195,123)
from: 13
to: 14.5
- color: rgb(187,199,114)
from: 14.5
to: 15.5
- color: rgb(198,202,105)
from: 15.5
to: 16.5
- color: rgb(209,205,96)
from: 16.5
to: 18
- color: rgb(220,208,87)
from: 18
to: 19
- color: rgb(231,211,78)
from: 19
to: 20
- color: rgb(242,214,69)
from: 20
to: 21
- color: rgb(253,217,60)
from: 21
to: 22
- color: rgb(247,206,58)
from: 22
to: 23.5
- color: rgb(240,194,55)
from: 23.5
to: 24.5
- color: rgb(234,183,53)
from: 24.5
to: 25.5
- color: rgb(227,171,50)
from: 25.5
to: 26.5
- color: rgb(221,160,48)
from: 26.5
to: 28
- color: rgb(214,148,45)
from: 28
to: 29
- color: rgb(208,137,43)
from: 29
to: 30
- color: rgb(201,125,40)
from: 30
to: 31
- color: rgb(195,114,38)
from: 31
to: 32
- color: rgb(188,102,35)
from: 32
to: 33.5
- color: rgb(182,91,33)
from: 33.5
to: 34.5
- color: rgb(175,79,30)
from: 34.5
to: 35.5
- color: rgb(169,68,28)
from: 35.5
to: 36.5
- color: rgb(162,56,25)
from: 36.5
to: 38
- color: rgb(155,45,23)
from: 38
to: 39
- color: rgb(148,33,20)
from: 39
to: 40
- color: rgb(141,22,18)
from: 40
to: 41
- color: rgb(134,11,15)
from: 41
to: 42
- color: rgb(127,0,12)
from: 42
to: 49
style: |
ha-card {
margin-top: 10px;
margin-bottom: -10px;
padding-top: 10px;
border-top: 5px solid #222222;
}
bar-card-card {
margin-right: 0px;
font-size: 13px;
}
bar-card-value {
color: #222222;
color: #9da5b4;
}
bar-card-iconbar {
width: 20px;
color: #333;
margin-top: 65px;
}
bar-card-name {
margin: 4px 0;
color: #9da5b4;
color: #dadadb;
}
.value-direction-up {
#color: #dadadb;
margin-top: -125px;
}
bar-card-backgroundbar {
filter: brightness(.45);
}
Were you successful with this? Iād like to make the target value dynamic too, using another entity attribute.
Place bar-card into config-template-card and define dynamically all options you like.
2 Likes
Thanks! I will look into that.
Hi,
iād like to change the icon color based on the severity. Is it possible to do this for each entity ?
Iāve try to set a style on one entity but itās not use until i set style for the whole bar-card code.
- type: markdown
card_mod:
class: header
content: '# Battery'
- type: custom:bar-card
entities:
- entity: sensor.atc_c77d_battery
- entity: sensor.atc_living_91b6_battery
style: |-
ha-icon {
color: red;
}
- entity: sensor.atc_office_e34f_battery
severity:
- color: '#ff5555'
icon: mdi:battery-low
from: 0
to: 25
- color: '#ffaa90'
icon: mdi:battery-medium
from: 26
to: 50
- color: '#33cc99'
icon: mdi:battery-high
from: 51
to: 100
positions:
indicator: 'off'
style: |-
bar-card-name {
color: white;
margin-left: 14px;
}
but of course if set in the last stype section itās applied to all object 
Any idea of doing this (if possible)
And another question, is it possible to fix the background to a specific color ?
Setting max dynamically was addressed up-thread, but itās not entirely clear how to get it all formatted correctly. Hereās how I managed to make it work:
In addition to bar-card, you will need to install the config-template-card module (I used HACS). Using this card, I declared a dashboard global variable that references the max value in the yaml configuration. When the user changes this value on the frontend, for example, the graph(s) will automatically re-scale. Here is an outline of how I setup the dashboard for 3 graphs; modify as needed to fit your application.
(Note: The code editor keeps prompting me to fix the formatting, but I couldnāt make it happy)
title: Home
views:
- path: default_view
title: Home
badges: []
config_template_card_vars:
- states['number.esphome_new_size'].state
cards:
- type: custom:config-template-card
entities:
- sensor.esphome_display_1
- sensor.esphome_display_2
- sensor.esphome_display_3
card:
type: custom:bar-card
title:
entities:
- entity: sensor.esphome_display_1
name: Bar graph 1
max: ${states['number.esphome_new_size'].state}
positions:
name: outside
color: Lime
- entity: sensor.esphome_display_2
name: Bar graph 2
max: ${states['number.esphome_new_size'].state}
positions:
name: outside
color: Red
- entity: sensor.esphome_count_display_3
name: Bar graph 3
max: ${states['number.esphome_new_size'].state}
positions:
name: outside
color: Orange
- type: entities
entities:
- entity: number.esphome_new_size
name: Set max on bar graphs
- entity: number.esphome_something_else
name: Set something else
title:
Should be added to a list of monitored entities.
It is meaningless to use this option inside a VIEW (make this variable accessible in a whole view) - It is supposed to be used inside a DASHBOARD.
If variables are used in ONE card only, then there is no need to use this option at all.
Thanks. Yes, I removed the global variable and max scaling still works correctly.
Hi. How did you do a horizontal divider and a row with a collapse button?
Iām using the bar card for a progress on a 3d print where its progress is the layer count. How can I define the max value to be the state of another sensor (total layer count)? I tried {{states('sensor.sensorname')}} but that isnāt working
Youāll need another card to achieve what you want. Look into config-template-card. Basically, you put your bar-card inside a config-template-card and that allows you to use templates wherever youād like.
According to the above, the target should accept an entity as value. But for me that is ignored.
Example:
type: custom:bar-card
entities:
- entity: sensor.solaredge_ac_total_energy_daily
target: sensor.pv_forecast_today
decimal: '1'
What is āaboveā?
According to Docs, the ātargetā option is a NUMBER (fixed value).
Someone above asked about a dynamical value for this option - it was advised to use config-template-card.
Thatās what I mean:
That was a long time ago, this functionality was removed(
Is this card working for anyone on 2023.08 ?
I get, custom element doesnāt exists: bar-card error now.
Edit: Ignore, I had to clear cache.