Yeah the clearing of your cache is probably what did it. It’s a common mistake, but as far as I know if you’re using HACS to update your cards you shouldn’t have issues with clearing cache anymore.
Yeah I’m using Hacs and I got to looking and only 2 of my bar cards where giving me issues. So I don’t know. Please keep up the awesome work.
1 Like
Because of your bar car I have this setup. Yes percent shows me how much is used but the visual with the bar card is awesome.
1 Like
My issue is caused by the browser caching.
I knew I had installed the 1.7.1 version but it kept using the previous one. A clear out has appeared to fix it.
Thanks!
Clearing the cache didn’t work for me but uninstalling and reinstalling via HACS did the trick (even though according to HACS I was already running version 1.7.1).
1 Like
Card reinstall and clear browser cahce, fixed the problem, thanks!
Hi, just updated to latest Homeassistant 0.106 and it broke all my bar card lovelace cards:
I got error: Cannot assign to read only property ‘min’ of object ‘#< Object>’
the card itself:
entities:
- cards:
- align: split
animation: auto
attribute: false
background_style: false
card_style:
border-radius: 5px
box-shadow: 0px 0px
charge_entity: false
color: 'var(--custom-bar-card-color, var(--primary-color))'
decimal: false
delay: 5000
direction: right
entities:
- entity: sensor.zigbee2mqtt_linkquality
- entity: sensor.ikea_switch_wall_lights_linkquality
height: 15px
icon: false
icon_position: 'off'
icon_style: false
indicator: auto
limit_value: false
max: 150
min: 0
minmax_style: false
padding: 4px
rounding: 3px
saturation: 50%
severity:
- color: '#ec515f'
value: 20
- color: var(--primary-color)
value: 150
show_icon: false
show_minmax: false
show_value: true
speed: 1000
tap_action: info
target: false
title: false
title_position: inside
title_style: false
type: 'custom:bar-card'
unit_of_measurement: false
value_style: false
visibility: false
width: 100%
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
border-radius: 20px
}
.card-header {
font-size: 18px;
padding: 5px 25px;
font-weight: bold;
}
title: ZigBee devices link quality
type: entities
Not aware how to troubleshoot this, maybe someone had some similar issue?
GOT IT WORKING, UNINSTALLED AND REINSTALLED TWICE, THEN DOWNGRADED TO 1.7.0 THEN UPGRADED TO 1.7.1 AND IT WORKED
I’m also getting an error:
Attempted to assign to readonly property
Here’s my config, its just the relevant part since it’s inside a much larger vertical card.
- cards:
- align: center
animation: auto
attribute: false
background_style: false
card_style: false
charge_entity: false
color: green
decimal: false
delay: 5000
direction: up
entities:
- entity: sensor.smappee_solar_today
entity: sensor.smappee_solar_today
height: 120px
icon: false
icon_position: 'off'
icon_style: false
indicator: auto-vertical
limit_value: false
max: 150
min: 0
minmax_style: false
padding: 4px
rounding: 3px
saturation: 50%
severity: false
show_minmax: false
show_value: true
speed: 1000
tap_action: info
target: false
title: Solar
title_position: bottom
title_style: false
type: 'custom:bar-card'
unit_of_measurement: false
value_style: false
visibility: false
width: 100px
- align: center
animation: auto
attribute: false
background_style: false
card_style: false
charge_entity: false
color: red
decimal: false
delay: 5000
direction: up
entities:
- entity: sensor.smappee_power_today
entity: sensor.smappee_power_today
height: 120px
icon: false
icon_position: 'off'
icon_style: false
indicator: auto-vertical
limit_value: false
max: 150
min: 0
minmax_style: false
padding: 4px
rounding: 3px
saturation: 50%
severity: false
show_minmax: false
show_value: true
speed: 1000
tap_action: info
target: false
title: Power
title_position: bottom
title_style: false
type: 'custom:bar-card'
unit_of_measurement: false
value_style: false
visibility: false
width: 100px
- align: center
animation: auto
attribute: false
background_style: false
card_style: false
charge_entity: false
color: blue
decimal: false
delay: 5000
direction: up
entities:
- entity: sensor.smappee_always_on_today
entity: sensor.smappee_always_on_today
height: 120px
icon: false
icon_position: 'off'
icon_style: false
indicator: auto-vertical
limit_value: false
max: 2.3
min: 0
minmax_style: false
padding: 4px
rounding: 3px
saturation: 50%
severity: false
show_minmax: false
show_value: true
speed: 1000
tap_action: info
target: false
title: Always On
title_position: bottom
title_style: false
type: 'custom:bar-card'
unit_of_measurement: false
value_style: false
visibility: false
width: 100px
title: Energy
I’ve uninstalled and reinstalled the Bar Card plugin, cleared browser cache and updated my instance to 0.106.4, didn’t work.
I also just tried it in a different browser, got the:
Cannot assign to read only property ‘min’ of object ‘#< Object>'
Any clues?
I copied the file from:
And renamed moved to www/custom-ui. No need to reload HA, just reloading the page should get that sorted.
Try it out.
1 Like
Update the card to 1.7.1 and clear your browser cache.
1 Like
i have a same problem after the update to 106.5
what can i do with it ?
i tried to update the bar-card.js but it’s still same.
thnx.
This is how to fix it if you’ve updated the card.
2 Likes
I’m having the same issue. Updated the card (which had file type ts not js). I changed to js and still not working.
I’d recommend using HACS to download custom cards, but if you want to use the latest version without HACS you’ll have to download it from the release page. https://github.com/custom-cards/bar-card/releases/tag/1.7.1
Big update 2.0.0 
. Not many new features and even some breaking changes 
.
This update unifies some of the card style to work better with the default lovelace layout.
Updates
- Converted to TypeScript.
- Code cleanup.
- Updated undefined entity warning to
ha-warningelement.
Fixes
- Added deepcopy function.
- Moved individual cards into a single
ha-cardelement. - Removed default card padding.
- Set default border-radius to use theme variable.
Breaking Changes
-
severityarray no longer requires definition of first color.
The severity array was always a bit confusing since you had to define the start color with a value that didn’t do anything. It will now fall back to the color config value whenever it is above the highest value.
The order of your array entries now also does not matter anymore as they are automatically sorted by value.
color: Green
severity:
- value: 50
color: Yellow
- value: 25
color: Red
- Removed
*_styleconfig options.
Styles config options have been removed in favor of card-mod, which allows restyling of many more elements than this card should support.
style: |
bar-card-value {
font-size: 20px;
color: Red;
}
- Removed
paddingconfig option. - Removed
roundingconfig option.
1 Like
Hi,
Trying to set the styles back with the new update here…
Could not define the rounding option with card mod in any way.
What am I missing here?
I’m using HA Core 107.7 but I’ve this error
I installed bar-card v2.0 via HACS as all the other custom cards I use.
What is it missing?
Are you sure the resource is included in your lovelace?
I don’t think you’re missing something, currently it’s only possible to override the CSS using the element ID. However that’s not really too great, I’ll have to fix that in my code so you can override the CSS using the element name instead of the ID.
Currently the default border radius is based on the card border radius set in your theme ha-card-border-radius. I’ve also added a custom theme variable to 2.0.1 bar-card-border-radius which you can set in your theme (if you have one) to override the border radius specifically for the bar card.
Theme YAML example:
bar-card-border-radius: '8px'
Hi,
Thanks for your answer, I understand the changes.
What happens when I have several entities under one card, using 2 columns? Until now the padding setting would set a space around each element. Currently I am able to set padding using card mod, however this sets space above and below each bar, but not between them. Also there is some extra margin appeared in the bottom of them both, I can see in dev tools.
Can you please advise on that?
YAML:
- type: custom:bar-card
style: |
ha-card {
border-radius: var(--border-radius);
padding: 5px;
}
columns: 2
title_position: 'inside'
icon: mdi:harddisk
icon_position: 'off'
unit_of_measurement: "%"
align: split
color: 'rgba(117,189,111,1.0)'
entities:
- entity: sensor.dimka_hdd_usage_c
title: "Disk C"
- entity: sensor.dimka_hdd_usage_d
title: "Disk D"
Screen:
