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:
- Create an FR for the
bar-cardfor this functionality. - Meanwhile - use card-mod to display a picture:
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.
3 Likes
Great, thanks for the quick help! That’s how it works!
2 Likes
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")}}
1 Like
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;
}
1 Like
Try removing entity_row.
1 Like
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 
1 Like
You are absolutely right!
That was a hasty conclusion from my side.
A bit later will check what could be wrong in your code.
1 Like
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;
}
Hi mate.
One of my battery sensors reports back as low middle and high, how can I colour severity this please if possible ?
Thanks
Thank you @Ildar_Gabdullin for your sample code. It works perfectly.
GUESS WHAT…
IF, in my sample code, sensor.temp_a in the IF statement does not exist,
the entire card-mod style section is skipped.
All tests would fail as long as this if statement contained an invalid entity 
Learned a lot and it’s working!
Then you probably should add some more checks like "if states.sensor.my_non_existing_sensor is defined"
looks classy …can you share your ui code?