That was the issue. After installing card-mod it is working. You’re a genius! Thanks for the help.
1 Like
Is it possible to have the full code (button-card as well ? )
Thanks
Hi, I was looking to create something similar as well, in my case I wanted to compare various statistics from last month and current month (time on, used kWh, etc.). There’s a trick you can do to achieve something close to what you’re looking for. Create a picture-elements card and stack both bar cards on top of each other. Use transparent picture with a size of the bar card (I use https://www.photopea.com/ to create those) and play with transparency colors to get the result that fits you.
For example:
- type: picture-elements
image: /local/bar2.png
elements:
- type: 'custom:bar-card'
style:
top: 50%
left: 50%
width: 100%
card_mod:
style: |
ha-card {
background: #ffffff00;
}
entities:
- entity: sensor.komfovent_mode_1_time_on
decimal: '0'
max: '500'
icon: mdi:fan
name: Mode 1
- entity: sensor.komfovent_mode_2_time_on
decimal: '0'
max: '500'
icon: mdi:fan
name: Mode 2
direction: right
height: 80%
color: '#ef080870' # red
- type: 'custom:bar-card'
style:
top: 50%
left: 50%
width: 100%
card_mod:
style: |
ha-card {
background: #ffffff00
}
bar-card-value {
margin-right: 70px;
font-size: 13px;
color: grey;
}
entities:
- entity: sensor.komfovent_mode_1_time_on_last_month
decimal: '0'
max: '500'
icon: 'off'
name: Mode 1
- entity: sensor.komfovent_mode_2_time_on_last_month
decimal: '0'
max: '500'
icon: 'off'
name: Mode 2
direction: right
height: 80%
color: '#00b2f960' #blue
The result:
4 Likes
Thanks for code! I was thinking about something similar, but never found the time to investigate 
One drawback of this solution is that we have 3 colors here (lower, middle upper parts of the bar). Ideally lower and upper parts should be same color (background) and middle part have bar color. I wanted to use it in weather forecast chart to show daily span of temperatures… yet need to experiment
I see what you mean, for my scenario having 4 colors was a benefit since then I can see whether this month’s result is better or worse compared to last.
What you can do is use the bar color (empty part) for the min value (no transparency) and then whatever color for max value, for example:
- Min value - color: black
- Max value - color: ‘#a8a8a8’
Result:
It’s little rough around the edges but that’s something that could work out.
How can I make the bars in ink levels rounded and the text overlay black on bars. I installed card-mod
Is possible to change text color inside bar?
Hey, is there a way to set the direction to come from the left side? It looks odd this way.
Is There any plans to set target with value_tamplate (i’m thinking about last_value attributes), or even any created sensor?
Hi. I am using your bar-card, and it is very good. I have come across one issue I cannot seem to resolve. I would like to use the value of a sensor to set the max value. Is this something that can be done?
That worked perfectly - thank you very much!
Is there any chance to set the decimal sepator right or according to user preferecnes ?
I always get these #,000.00 figures and my wife goes crazy cause depending on what card you use the meaning will change to the opposite and as she calls
nothing feels natural or like coming home cause she has to think twices about every figure
What she had made so upset were the scales and the energy meters, so Watt hours.
I hope to find a way to use the bar card in a natural way we are used too which means #.###,0 only formats and nothing else.
Thanks for everyone who is helping us to achieve that goal !
Hello, I’m looking for a way to display this chart as in the example. In addition to the actual values, the aim is to show the upper and lower limits. So far I have only found the possibility to change the colors via severity or to specify a target value with “target”. But I don’t know how to implement several different ranges.
Thanks a lot in advance.
Good morning all,
I am trying to change the color of the icon of my sensor (not binary.sensor) for example to blue. I have tried a lot of things, but I can’t find a solution. Do you have an idea ?
Thanks a lot in advance
Hi guys,
In a disk %age usage bar card, I would like to display the actual value of the free disk space.
Something like: Free space: 62GB/212,0G (Usage: 69%)
Is that doable?
(Sorry if the question is not clear)
No comments? Ideas?
2 Likes
Some tricks with the card - displaying TWO text lines:
This is implemented by the decl_bar_additional_info decluttering card with the aid of card-mod.
How to use:
- type: custom:decluttering-card
template: decl_bar_additional_info
variables:
- SENSOR_USAGE: sensor.iiyama_ohm_ssd_corsair_load_used_space
- VALUE_TEXT_1: 968 GB
- VALUE_TEXT_2: Samsung HD204UI
decl_bar_additional_info:
default:
- VALUE_TEXT_2: ''
card:
type: custom:mod-card
card:
type: custom:decluttering-card
template: decl_bar_usage
variables:
- SENSOR_USAGE: '[[SENSOR_USAGE]]'
- VALUE_NAME: '[[VALUE_TEXT_1]]'
card_mod:
style:
decluttering-card $ bar-card $: |
bar-card-name {
line-height: 1.1rem;
}
bar-card-name::after {
content: "{% set CONTENT = '\A ' + '[[VALUE_TEXT_2]]' -%}
{{ CONTENT }}";
white-space: pre;
font-size: 0.8rem;
}
Internally using the decl_bar_usage template:
decl_bar_usage:
default: &ref_default
- VALUE_NAME: ''
- VALUE_SHOW_NAME: inside
- VALUE_SHOW_STATE: inside
- VALUE_COLOR_1: green
- VALUE_COLOR_2: orange
- VALUE_COLOR_3: red
- VALUE_LIMIT_1: 33
- VALUE_LIMIT_1_1: 34
- VALUE_LIMIT_2: 66
- VALUE_LIMIT_2_1: 67
card:
type: custom:bar-card
entity: '[[SENSOR_USAGE]]'
name: '[[VALUE_NAME]]'
icon: ''
unit_of_measurement: ''
direction: right
entity_row: true
height: 40px
width: 100%
color: ''
complementary: false
decimal: 0
target: 0
limit_value: false
min: '0'
max: '100'
severity:
- color: '[[VALUE_COLOR_1]]'
from: 0
to: '[[VALUE_LIMIT_1]]'
icon: ''
hide: false
- color: '[[VALUE_COLOR_2]]'
from: '[[VALUE_LIMIT_1_1]]'
to: '[[VALUE_LIMIT_2]]'
icon: ''
hide: false
- color: '[[VALUE_COLOR_3]]'
from: '[[VALUE_LIMIT_2_1]]'
to: 100
icon: ''
hide: false
positions:
icon: 'off'
indicator: 'off'
name: '[[VALUE_SHOW_NAME]]'
minmax: 'off'
value: '[[VALUE_SHOW_STATE]]'
animation:
state: 'off'
speed: 3
Surely the same technics may be used to display last-changed for the sensor:
decl_bar_additional_info__last_changed:
card:
type: custom:mod-card
card:
type: custom:decluttering-card
template: decl_bar_usage
variables:
- SENSOR_USAGE: '[[SENSOR_USAGE]]'
- VALUE_NAME: '[[VALUE_TEXT_1]]'
card_mod:
style:
decluttering-card $ bar-card $: |
bar-card-name {
line-height: 1.1rem;
}
bar-card-name::after {
content: "{% set SENSOR_NAME = '[[SENSOR_USAGE]]' -%}
{%- if not states(SENSOR_NAME) in ['unavailable','unknown'] -%}
{%- set DOMAIN = SENSOR_NAME.split('.')[0] -%}
{%- set SENSOR_NAME = SENSOR_NAME.split('.')[1] -%}
{%- set LAST_CHANGED = states[DOMAIN][SENSOR_NAME].last_changed -%}
{%- set LAST_CHANGED_FORMATTED = relative_time(LAST_CHANGED) -%}
{%- set LAST_CHANGED_FORMATTED = '\A '+LAST_CHANGED_FORMATTED+' ago' -%}
{%- else -%}
{%- set LAST_CHANGED_FORMATTED = '' -%}
{%- endif -%}
{{ LAST_CHANGED_FORMATTED }}";
white-space: pre;
font-size: 0.8rem;
}
Update 26.05.22: changed a code for decl_bar_usage - removed mod-card.
6 Likes
After searching and searching I can’t find it: How can the bar-card be installed manually?
That is, installing it without HACS.