@Gluwc I’m back my friend a new issue since either latest version of your card or ha v 0.109 unsure as I upgraded both at the same time 
. The gap between entities on a multi-entity bar card is huge now.
Before
After
2 Likes
Hi @Gluwc
did you get a chance to check this yet? https://github.com/custom-cards/bar-card/issues/79
not sure if HA update or Barcard update caused the error, so hope you can fix this?
thanks!
thx that fixed it for me too, indeed strange this changed
Whatever I do, the custom bar card can’t be found. I import via:
- url: /local/bar-card.js
type: module
- type: custom:vertical-stack-in-card
title: EPSON XP 830
cards:
- type: custom:bar-card
columns: 5
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_xp_830_series_cyan_ink
- color: MediumOrchid
entity: sensor.epson_xp_830_series_magenta_ink
- color: Gold
entity: sensor.epson_xp_830_series_yellow_ink
- color: Black
entity: sensor.epson_xp_830_series_black_ink
- color: Black
entity: sensor.epson_xp_830_series_photo_black_ink
height: 200px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
Erorr:
Custom element doesn't exist: bar-card.
type: 'custom:bar-card'
columns: 5
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_xp_830_series_cyan_ink
- color: MediumOrchid
entity: sensor.epson_xp_830_series_magenta_ink
- color: Gold
entity: sensor.epson_xp_830_series_yellow_ink
- color: Black
entity: sensor.epson_xp_830_series_black_ink
- color: Black
entity: sensor.epson_xp_830_series_photo_black_ink
height: 200px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
sure:
type: entities
title: Epson printer
show_header_toggle: false
entities:
- device_tracker.epson_printer
- entity: script.update_epson_cartridge_sensors
action_name: Update
- type: custom:hui-glance-card
style: |
ha-card {box-shadow:none;}
entities:
- entity: sensor.epson_ink_level_black
name: Black
- entity: sensor.epson_ink_level_cyan
name: Cyan
- entity: sensor.epson_ink_level_magenta
name: Magenta
- entity: sensor.epson_ink_level_yellow
name: Yellow
- entity: sensor.epson_ink_level_waste
name: Waste
- type: custom:bar-card
style: |
ha-card {box-shadow:none;}
bar-card-value {color:darkgrey;}
bar-card-title {word-break:break-all;}
stack: horizontal
entity_row: true
direction: up
entities:
- color: black
entity: sensor.epson_ink_level_black
name: Black
- color: cyan
entity: sensor.epson_ink_level_cyan
name: Cyan
- color: magenta
entity: sensor.epson_ink_level_magenta
name: Magenta
- color: yellow
entity: sensor.epson_ink_level_yellow
name: Yellow
- color: grey
entity: sensor.epson_ink_level_waste
name: Waste
height: 150px
max: 100
min: 0
target: 20
unit_of_measurement: '%'
width: 100%
positions:
icon: 'off'
- input_number.ink_level
- automation.printer_ink_alert
- type: custom:fold-entity-row
head:
type: section
label: Low ink levels
padding: 0
entities:
- type: custom:hui-glance-card
style: |
ha-card {
box-shadow: none;
background-image: url('/local/devices/epson/official/epson_background.png');
background-size: cover;
}
entities:
- entity: binary_sensor.ink_level_black_threshold
name: Black
- entity: binary_sensor.ink_level_cyan_threshold
name: Cyan
- entity: binary_sensor.ink_level_magenta_threshold
name: Magenta
- entity: binary_sensor.ink_level_yellow_threshold
name: Yellow
- entity: binary_sensor.ink_level_waste_threshold
name: Waste
be ware though, the bottom section for the glance card isn’t yet styled as I want it, (to use the full width of the card) Apparently Glance card behaves differently when styling is concerned.
1 Like
thanks mate…
I get an error I can’t resolve with the Bar Card… has anyone seen this before? doesn’t matter what I do with “indicator” it throws this error. was also throwing an error for title_position and rounding… Home Assistant running non-HASSIO on Raspbian - I suspect I’m missing a dependency but the logs aren’t telling me as much
From reading the documentation, aren’t inside, outside and off the only possible settings for indicator:? I’m probably wrong, but it might be choking on your use of auto.
it’s also supposed to have a default, but fails if I leave it blank as well…
Straight from the repo these are the valid options for postions
so you either need to select one of these or don’t put it in there at all if you want it auto
Is there anyway to increase the gap between the bar and the value? I can’t relly get it to work.
- type: 'custom:bar-card'
entity: sensor.glances_ram_used_percent_2
positions:
indicator: off
value: outside
name: outside
width: 70%
height: 15px
style: |
bar-card-card {
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
margin-top: -50px;
}
- type: 'custom:bar-card'
entity: sensor.glances_data_used_percent
positions:
indicator: off
value: outside
name: outside
width: 70%
height: 15px
style: |
bar-card-card {
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
margin-top: -50px;
}
and I want to steal your usage for my own cards, hurry up and share 
1 Like
bar-card-value {
padding-left: 5px;
}
2 Likes
I’m working on that right now
1 Like
Seems the repo for this card has disappeared. Is it gone or did it move somewhere else?
@Gluwc, would it be possible to add feature to the bar card so we could have sort of candlestick chart? I mean to be able to display the graph similar to mockup below:
I’d love to have something like that for creation of weather card with low/high temperatures per day 
Would be tricky, I guess, as would require to link 2 entities (representing low and high values) to single chart…
2 Likes
