Try that:
type: custom:bar-card
entities:
- entity: ......
...
...
card_mod:
style: |
bar-card-name {
line-height: 1.1rem;
}
bar-card-name::after {
content: "{{ '\A ' + relative_time(states.sensor.tpms_f1a81549.last_changed) + ' ago' }}";
white-space: pre;
font-size: 0.8rem;
}
Check again that post, made some corrections.
Thank you so much for your help! It works now. Now, I’ll try to figure out how to do it on a vertical bar.
I’ve read the card-mod pages, but I’m having problems with nested cards. I’ll do some more experimenting, but your help was very valuable. I’m learning from examples.
I am currently using the bar card to display the state of several batteries and I use the severity to color it accordingly. However once the battery reaches 0% the bar obviously disappears. Is there a way to color the background red at that state? Currently it’s not very visually apparent when a battery is completely flat:
Hi,
I am using the bar card for displaying some entities.
Now I have a question: how can I replace the default icons of the entities with my own entity-pictures? I have already assigned my own entity-pictures to the entities in customize.yaml. Displaying these pictures in other cards works also e.g. in the entities card. But unfortunately I didn’t find how to display these entity pictures also in the Bar-Card? 
I hope you understand what I mean?
Does anyone have a tip for me here please? That would be great!
Thank you!
Ralf
And the second picture … new users are only allowed to put one picture in one post. 
Since bar-card does not support displaying entity_picture for an item, you should:
bar-card for this functionality.type: vertical-stack
title: entity_picture
cards:
- type: custom:bar-card
columns: 1
entities:
- entity: sensor.processor_use
min: '0'
max: '100'
- type: custom:bar-card
columns: 1
entities:
- entity: sensor.processor_use
min: '0'
max: '100'
icon: mdi:blank
positions:
indicator: 'off'
style: |
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/images/persons/ildar.png");
background-size: 100% 100%;
}
You may also add border-radius: 10%; to get rounded corners.
Great, thanks for the quick help! That’s how it works!
hi! I’m just starting to play with the card, it looks awesome.
I’m wondering, is there an option to keep the indicator arrow always displayed/always “on”? I’d like to always see the last trend on some temperature bars.
Thanks!
Hi all.
I’m trying to get something working. I have 6 entities for different elements of my PV array. I’m using bar cards but I want to get the bottom three bar cards to butt up against each other. I have changed the size of the bar but they just stay in the same place.
I’ve played with card-mod but cannot figure it out. I’m sure that this is a really simple thing as I’ve seen examples in some of the comments in this thread.
Any ideas? I would post code but I don’t have much in place, yet.
Cheers
Using bar-card as a chart
Suppose there is a sensor with attributes representing some forecast or historical data.
Here is a bar chart for these data:
type: vertical-stack
cards:
- type: entities
entities:
- input_number.test_bar_graph_1
- input_number.test_bar_graph_2
- input_number.test_bar_graph_3
- input_number.test_bar_graph_4
- input_number.test_bar_graph_5
- type: custom:auto-entities
card:
type: custom:bar-card
direction: up
columns: 5
height: 100px
width: 100%
positions:
icon: off
name: outside
indicator: off
card_mod:
style: |
bar-card-backgroundbar {
background-color: transparent;
}
filter:
template: |-
{% set SENSOR = 'sensor.test_bar_graph' -%}
{%- for attr in states[SENSOR].attributes -%}
{%- set ATTR_VALUE = states[SENSOR].attributes[attr] -%}
{%- if is_number(ATTR_VALUE) -%}
{{
{
'entity': SENSOR,
'attribute': attr,
'name': attr
}
}},
{%- endif -%}
{%- endfor %}
input_number:
test_bar_graph_1: &ref_test_bar_graph
min: 0
max: 100
step: 1
mode: slider
test_bar_graph_2: *ref_test_bar_graph
test_bar_graph_3: *ref_test_bar_graph
test_bar_graph_4: *ref_test_bar_graph
test_bar_graph_5: *ref_test_bar_graph
#############################################################################
template:
- sensor:
- name: test_bar_graph
state: xyz
attributes:
attr_1: >-
{{states("input_number.test_bar_graph_1")}}
attr_2: >-
{{states("input_number.test_bar_graph_2")}}
attr_3: >-
{{states("input_number.test_bar_graph_3")}}
attr_4: >-
{{states("input_number.test_bar_graph_4")}}
attr_5: >-
{{states("input_number.test_bar_graph_5")}}
Hi All
got a bit of a funny one - i cant seem to make this card not transparent.
and code:
title: Windows Server 2016
type: custom:bar-card
columns: 2
entity_row: true
entities:
- entity: sensor.win_atalrhao5tb_cpu_usage
name: CPU
icon: mdi:cpu-64-bit
height: 30px
- entity: sensor.win_atalrhao5tb_memory_usage
name: RAM
icon: mdi:brain
height: 30px
- entity: sensor.win_atalrhao5tb_storage_c_usage
name: Drive C
icon: mdi:harddisk
height: 30px
- entity: sensor.win_atalrhao5tb_storage_d_usage
name: Drive D
icon: mdi:harddisk
height: 30px
- entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_1
name: Core 1
icon: mdi:temperature-celsius
height: 30px
- entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_2
name: Core 2
icon: mdi:temperature-celsius
height: 30px
- entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_3
name: Core 3
icon: mdi:temperature-celsius
height: 30px
- entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_4
name: Core 4
icon: mdi:temperature-celsius
height: 30px
- entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_5
name: Core 5
icon: mdi:temperature-celsius
height: 30px
- entity: sensor.win_atalrhao5tb_intel_xeon_e5_2650_v2_temperatures_cpu_core_6
name: Core 6
icon: mdi:temperature-celsius
height: 30px
severity:
- to: '60'
color: rgb(26,204,147,0.33)
from: '0'
- from: '61'
to: '80'
color: rgb(255,140,0,0.60)
- from: '81'
to: '100'
color: rgb(163,0,0,0.60)
positions:
indicator: 'off'
style: |-
bar-card-title {
text-shadow: 1px 1px 5px black;
}
Try removing entity_row.
That did it! thank you
Hello.
I was wondering if it there,s a way to use a template or an entity attribute in the target option?
My use would be this simple: I have an sensor from bodymiscale component that the state is my weight and the attribute is my ideal weight. I use the state for a horizontal bar and i want to use the attribute ideal weight for the target.
update: i read older posts and used the custom:config-template-card ( great help for use templates in the dashboard) to achieve this.
Hi everyone would it be possible to install the component without HACS?
Thank you
PS sorry this is an online translation
For some reason, the previous code doesn’t seem to work anymore (since a month or 2?)
type: custom:bar-card
entities:
- entity: sensor.temp_a
name: Garage
- entity: sensor.temp_b
name: Outside
- entity: sensor.temp_c
name: Living
direction: up
height: 200px
stack: horizontal
card_mod:
style: |
bar-card-row bar-card-card:nth-of-type(2) {
--bar-card-color:
{% if states('sensor.temp_a') | float < states('sensor.temp_b') | float %}
#03a9f4;
{% else %}
red;
{% endif %}
}
It feels like something in the structure or CSS has changed causing the bar-card-color not to be applied.
Any idea how I can (now) change the color of a bar, based on entity states (value)?
The test below doesn’t work but could be a great feature?
- entity: sensor.temp_a
name: Living
severity:
- color: red
from: {% state('sensor.temp_b') | float %}
to: 99
(result: if the temperature of temp_a if higher than temp_b, the bar would turn red)
Hello @Ildar_Gabdullin ,
It was NEVER supposed to work since you got a wrong path.
This worked fine for quite a while.
What do you mean by wrong path?
Keep in mind that I’m using vertical bars, not horizontal. In the CSS it looks like this:
Horizontal bars:
_bar-card-ROW
___bar-card-card
_bar-card-ROW
___bar-card-card
Multiple rows, each with 1 card:
bar-card-row:nth-of-type(1) {
Vertical bars:
_bar-card-ROW
___bar-card-card
___bar-card-card
___bar-card-card
1 row, multiple cards:
bar-card-row bar-card-card:nth-of-type(1) {
Unfortunately, right now it looks like I can’t get any CSS change to work 
You are absolutely right!
That was a hasty conclusion from my side.
A bit later will check what could be wrong in your code.
This color in my default dark theme looks same as a standard bar color.
Replaced it by another color for test.
Seems to work, check this:
type: vertical-stack
cards:
- type: entities
entities:
- input_boolean.test_boolean
- input_number.test_level_1
- type: custom:bar-card
<<: &ref_settings
entities:
- entity: input_number.test_level_1
name: Garage
- entity: input_number.test_level_1
name: Outside
direction: up
height: 200px
stack: horizontal
card_mod:
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;
}
- type: custom:bar-card
<<: *ref_settings
card_mod:
style: |
bar-card-row bar-card-card:nth-of-type(2) {
--bar-card-color:
{%- if is_state('input_boolean.test_boolean','on') -%}
#ffff00;
{%- else -%}
red;
{%- endif %}
}
- type: custom:bar-card
<<: *ref_settings
card_mod:
style: |
bar-card-row {
--bar-card-color: #ffff00;
}
