Wow thats awesome 
1 Like
Awesome card, as advertised by Dr Zzs today
I wanted to use a bar for my “Net Power” sensor, which can be positive or negative. Initially I tried setting a min of -5000 and max of 6000, but it didn’t look great.
Then I saw the “hide” option under Severity, but I can’t work out from the documentation how to configure it. I thought I could create two bars, one for positive “Net Power” and another for negative “Net Power” and have only one showing at a time, with the positive bar hidden if the “Net Power” value is less than zero and the negative bar hidden if the “Net Power” value is over 0.
The below didn’t work (and Lovelace appears to have added the “null”?).
- hide: null
from: 0
to: -7
Doh. Worked it out. Re-read the documentation and noticed that the default for “Hide” is “false”.
This does what I need:
- hide: true
from: -7
to: 0
Hi all,
I saw on this reply (Lovelace: Bar Card) that the version 0.1.0 enable the possibility to use an entity as max value.
But when i try to use this feature, it doesn’t seems to work, it show me NaN.
Here is my current configuration :
type: 'custom:bar-card'
entities:
- entity: sensor.sma_current_month_production
limit_value: true
unit_of_measurement: kWh
max: sensor.sma_last_month_production
I’m doing wrong ?
I’m using use the latest version 3.1.6
Thanks.
Hi,
Need some help with border-radius, please look at picture below:
i want the border also below to be like above. how can it be done?
This is my code:
- type: custom:bar-card
style: |-
bar-card-current, bar-card-backgroundbar {
border-radius: 15px;
}
direction: up
height: 200px
stack: horizontal
entities:
- entity: sensor.processor_use
name: CPU
- entity: sensor.memory_use_percent
name: Memory
- entity: sensor.disk_use_percent_home
name: Disk
# - entity: sensor.swap_use_percent
# name: Swap Use
severity:
- color: '#009900'
from: 0
to: 33
- color: '#FFB732'
from: 34
to: 50
- color: '#e67e00'
from: 51
to: 80
- color: '#d11919'
from: 81
to: 100
Tx,
1 Like
Replace bar-card-current with bar-card-currentbar
if you are using a theme you can add this line in the theme you’re using:
bar-card-border-radius: "15px"
4 Likes
Is it possible to fully customize all 4 bar colors used by bar-card? I mean background above traget, background below target, bar below target and bar over target? At the moment it seems to use some combinations/shades of primary bar color, but having possibility to play freely with these colors would open whole new are for card usage…
No, don’t think so.
Maybe you can ask the original author for an enhancement on github:
https://github.com/custom-cards/bar-card/issues
Good evening, following upgrade to HA 111 im getting this error
2020-06-10 21:44:20 ERROR (MainThread) [hacs] Tried to serve up '/config/www/community/bar-card/index.m.js.map' but it does not exist
which incidentally seems to affect browser_mod; the pop-up feature doesnt work, but when I remove bar-card it works.
anyone else experieincing this?
Yes it’s been doing this for the last few releases. I don’t know that it is really bar-card causing it though.
thank you for your feedback.
Very nice !
1 Like
Hello, I use the Bar card since a long time, and I wanted to change, but I have a little issue : The icon isn’t in the same position if you use the inside or outside position :
The icon is lower than in the first screenshot.
Do you have the same thing ?
Hello, I juste installed this card but I have some problems :
- I haven’t round corner in the bar
- lovelace ui configurator of the card is buggy
Did I miss something ?
You need card-mod to be able to style them.
It’s installed 
Did I need to put specific code in the card ? (round corners are not configurable in the UI)
Hey,
Out of interest how did you end up doing this? I can’t decide on colours etc to best indicate whats happening with my power at a glance. This is what I have so far:
card:
entities:
- direction: right
entity: sensor.p_grid
height: 60px
max: '5'
min: '-3.6'
name: Power From Grid
positions:
icon: 'off'
indicator: inside
name: inside
value: inside
severity:
- color: Green
from: '-3.6'
to: '-2.6'
- color: LightGreen
from: '-2.6'
to: '-1'
- color: Yellow
from: '-1'
to: '0'
- color: Orange
from: '0'
to: '1.5'
- color: Red
from: '1.5'
to: '2.5'
- color: Maroon
from: '2.5'
to: '5'
- entity: sensor.p_pv
height: 60px
max: '3.7'
min: '0'
positions:
icon: 'off'
indicator: inside
value: inside
severity:
- color: Yellow
from: '0'
to: '1'
- color: LightGreen
from: '1'
to: '2'
- color: Green
from: '2'
to: '3.7'
- entity: sensor.p_load
height: 60px
max: '-5'
min: '0'
positions:
icon: 'off'
indicator: inside
value: inside
severity:
- color: Green
from: '-1'
to: '0'
- color: Orange
from: '-2'
to: '-1'
- color: Red
from: '-2'
to: '-3'
- color: Maroon
from: '-4'
to: '-5'
style: |-
bar-card-value {
margin-right: auto;
font-size: 35px;
font-weight: bold;
}
bar-card-name {
margin-right: auto;
font-size: 18px;
font-weight: bold;
}
entity_row: true
type: 'custom:bar-card'
conditions:
- entity: input_boolean.solar
state: 'on'
type: conditional
So similar to this I put blue as any value lower than 0W to indicate exporting power.
Then green->yelow->red for anything over 0W