hi can you please explain how to download this card with HACS
Go to your HACS page. Click the 3 dot menu
Click custom repositories
Put the link to the github page for the bard card in the repository box. And choose a category. In this case lovelace.
Click add.
2 Likes
Is it possible to have the card driven by a sensor which can be positive (bar to the right) or negative (bar to the left), when value is zero, nothing (or a single line in the center)
DIfficult to do? Hint?
Its a sensor of a wheel of a boat, if the wheel is turned right/left it should show in the card. Hope I am clear
1 Like
Hello,
I look for a history possibility…
On each day I check some sets of sensors, but I cannot see the values from the day before or 2 days before or 1 week before (like in the Energy Dashboard)…
I need this for 16 or 32 or 48 Sensors or for the whole page… please see the picture:
Is there a possibility to solve this? With some Buttons for example similar this:
type: vertical-stack
cards:
- type: custom:auto-entities
card:
type: custom:bar-card
title: Individual
width: 10
icon: mdi:lightning-bolt
align: split
columns: 1
decimal: 2
height: 40
unit_of-measurement: kWh
max: 50
severity:
- color: red
to: '50'
from: '30'
- color: orange
to: '30'
from: '10'
- color: green
to: '10'
from: '5'
- color: blue
to: '5'
from: '0'
entity_row: true
entities: []
sort:
method: state
numeric: true
reverse: true
filter:
include:
- entity_id: sensor.stube_1_1d
- entity_id: sensor.kuche_oben_2_1d
- entity_id: sensor.bad_oben_3_1d
- entity_id: sensor.kulock_4_1d
- entity_id: sensor.hauslicht_oben_5_1d
- entity_id: sensor.boden_6_1d
- entity_id: sensor.waschhaus_7_1d
- entity_id: sensor.heizung_therme_8_1d
- entity_id: sensor.kuche_unten_9_1d
- entity_id: sensor.stalllicht_10_1d
- entity_id: sensor.keller1_11_1d
- entity_id: sensor.keller2_12_1d
- entity_id: sensor.keller3_13_1d
- entity_id: sensor.herd1_14_1d
- entity_id: sensor.herd2_15_1d
- entity_id: sensor.herd3_16_1d
- entity_id: sensor.emporia_123_1d
Ronald
Hi all
thx for this helpfull discussions here!
i’m searching for an approach to have a bar starting 0 in the middle.
Specifically, it’s about my electricity consumption from the grid. As I have a solar system, this can be positive (power supply - red) and negative (feed-in - green).Or the battery - charging/discharging…
Bar starting from zero in the centre.
thx
c.
1 Like
Hi guys, it might be somewhere here in the thread but I am not able to find it 
Is it possible to change a bar color based on the state of sensor differs to the displayed one?
It is closely related to the @caro question. I would like to change bar’s color (current - sensor 1) if battery is charging/discharging (sensor 2)
tried
style: |
bar-card-currentbar {
color:
{% if states('sensor.battery_current')| int(0) > 0 %}
rgba(153, 31, 47, 0.5);
{% else %}
rgba(38, 92, 39, 0.5);
{% endif %}
But no way
Start with fixing the card-mod code in accordance to card-mod 3.4.0 requirements.
I am a bit confused,
card_mod documentation:
card_mod:
style: |
ha-card {
--ha-card-background: teal;
color: var(--primary-color);
}
and my try
card_mod:
style: |
bar-card-currentbar {
color:
{% if states('sensor.battery_current')| int(0) > 0 %}
rgba(153, 31, 47, 0.5);
{% else %}
rgba(38, 92, 39, 0.5);
{% endif %}
}
I do not see any difference, well, in the format at least 
What you posted here was w/o “card_mod” keyword.
As for style itself: a card-mod code must be written based on Code Inspector (not “taken from somewhere” etc).
I see, my negligence.
Anyhow, card_mod is installed and used.
Template itself works in dev tools.
So morelikely it is due to part of code between
style: | and first {% if and seems to be my weakest point 
This is a selector for the related bar:
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>layout-card$grid-layout$#root>hui-horizontal-stack-card:nth-child(10)$#root>bar-card$#states>bar-card-row:nth-child(3)>bar-card-card:nth-child(2)>bar-card-background>bar-card-currentbar"
Should be quite simple, look at this example:
type: custom:bar-card
entities:
- entity: sensor.bedroom_temperature_humidity_battery
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
{% if states('sensor.office_temperature_humidity_battery') | int > 100 %}
--bar-color: #0033ff !important;
{% else %}
--bar-color: black !important;
{% endif %}
}
Thanks. I found the culprit (me) >> Wrong alignment 
I have a card:
how to add a dotted line to a bar?
my card code
type: custom:stack-in-card
title: []
cards:
- type: custom:bar-card
entities:
- entity: sensor.iphone_fill_battery_level
name: Battery iPhone
align: split
columns: 1
height: 4px
width: 70%
icon: mdi:lightning-bolt
animation:
state: 'on'
speed: 2
attribute: null
color: white
decimal: 0
direction: right
positions:
icon: 'off'
indicator: inside
name: inside
minmax: 'off'
value: inside
unit_of_measurement: null
max: 100
min: 0
severity:
- color: '#abd25f'
from: '0'
to: '20'
- color: '#ffd646'
from: '20'
to: '50'
- color: '#bf9540'
from: '50'
to: '80'
- color: '#f79c56'
from: '80'
to: '100'
card_mod:
style: |
ha-card {
--paper-item-icon-color: rgb(47,186,229);
border-radius: 2.5px;
border-width: 0px !important;
background: none;
border: none;
height: 38px;
}
ha-icon {
margin-top: -40px;
padding-right: 25px;
}
bar-card-indicator {
margin-top: -10px;
padding-right: 0px;
}
bar-card-name {
margin-top: 0px;
padding-left: 0px;
}
bar-card-backgroundbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-currentbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-targetbar {
margin-top: 12px;
border-radius: 2.5px;
}
bar-card-animationbar {
margin-top: 12px;
padding-right: 0px;
}
bar-card-targetmarker {
margin-top: 40px;
border-radius: 2.5px;
}
bar-card-value {
margin-top: 0px;
padding-left: 5px;
}
bar-card-row {
margin-bottom: 0px !important;
margin-top: -10px !important;
}
bar-card-backgroundbar {
background: linear-gradient(to right, green 5%, orange 50%, red 75%);
border-radius: 25px;
}
bar-card-currentbar {
background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 25px;
}
bar-card-contentbar {
font-size: 14px; color: white;
}
bar-card-value {
font-size: 14px; color: white;
}
card_mod:
style: |
ha-card {
height: 30px;
border: 0px;
background: transparent;
}
If you are an experienced card-mod user - add a striped mask to the background.
Thank you!
everything worked out
bar-card-currentbar {
background: linear-gradient(to right, green 5%, yellow 25%, orange 50%, red 75%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
border-radius: 25px;
mask-image: repeating-linear-gradient( 90deg, transparent 0px, black 4px, transparent 0px, black 4px);
}
3 Likes
Is there a way to reference limits from an sensor (sensor.daily_min, sensor.daily_max, sensor.daily_target …), either there attribute or a sensor directly?
I was not able to get it working with template syntax or any other way.
Reason why i would love to see it, is that i am using it for PV purposes, and i have different min max and target values per day.
Furthermore same for grid import and export.
Bar 2 and 3 are with numeric values bar one is the one where I am again and again trying to use a specific sensor or a sensores attributes to be used as the numeric values
Thanks in advance
Hi. Have you sorted this out?
Hi,
I am having issues with the decimal values.
Though I have set the decimals to 2:
- type: custom:auto-entities
card:
type: custom:bar-card
title: Excess Power
positions:
name: null
value: outside
indicator: 'off'
icon: 'off'
max: 5
severity:
- color: '#ffff00'
from: 0
to: 0.99
- color: '#0066ff'
from: 1
to: 2.49
- color: '#00ff00'
from: 2.5
to: 100
- color: '#ff0000'
from: 0
to: 0
height: 30px
style: "\n#states { padding: 0 } \nbar-card-name,\nbar-card-value {\n \n color: #ffffff;\n }\nbar-card-value\t{\n font-weight: bold;\n}\nbar-card-indicator {\n transform: scaleY(-1);\n}\n"
stack: vertical
direction: right
decimals: 2
entities: []
sort:
method: state
filter:
include:
- entity_id: sensor.grid_export
exclude:
- state: unavailable
- state: unknown
Thankyou
- I wonder why to show a simple issue you need to post a tons of unrelated things like auto-entities & wrong card-mod? Like “here is my code, now sort it out”.
- The right option is “decimal”.
- Wow, sorry for trying to provide context to the issue and question. I bet if i didnt add the whole code you would have complained I didnt include enough. Really sorry I included too much…
- Thankyou. This was all I needed and has fixed the issue.