Definitely possible, but this will take me a bit longer to do. I’d probably have to rework some of my code to make it easier to switch between vertical and horizontal.
I am in no rush at all so if it is possible for you and you agree that is of use then anytime you have the time would be great.
Cheers!
Maybe I’m a bit slow or a sloppy reader, but is there a step by step set-up for this card? I have other custom cards set up. For hassio is it just that I need to drop the bar-card.js here \HASSIO\config\www\dist and then configure a relevant custom card ? Did I need to add some kind of ‘resources’ reference? Apologies if this is rooky Q or I’ve missed something (please point me to the info), but I couldn’t seem to understand the basic setup process from the run-down or scrolling through this thread. This looks super cool by the way. Thank you.
Edited: Figured it out. Added the .js to the directory above, added a resource like below, and then copied others examples for the configuration.
Again, not sure if I’m just blind/slow…
resources:
- type: js
url: /local/dist/bar-card.js?Ho provato a non disturbarti cercando di configurare da solo Life360… se puoi indicarmi come hai fatto?
allo stato attuale sono registrato su Life360
I tried not to bother trying to configure alone Life360 … if you can tell me how did you do?
at present they are registered on Life360
How about having the ability to set the “max” and “min” to specific sensors too?
No idea on application for that right now, but maybe the max one can become useful somehow (not really sure about the min, but having the possibility allow more opportunity in the future ^^ )
2 Likes
Nessun problema, ma dato che si tratta di un componente diverso da questo topic direi di passare la conversazione nel giusto topic: Life360 Device Tracker Platform
Sicuramente una cosa da cui devi partire per poter passare al passo successivo della visualizzazione è l’installazione del componente, una volta che hai quel pezzetto configurato si può fare il resto 
No problem, but because we’re talking about a custom component and not directly the bar card this topic is about, it might be better if we move to the right topic: Life360 Device Tracker Platform
First thing you need to do anyway, is to install the component so that you can access those informations, once that is done we can move forward to the card configuration 
Andrea
Release 0.1.0 adds a bunch of requested features.
- complete re-write of bars and indicators using flexbox
-
fromconfig option removed -
directionconfig option added -
target,minandmaxnow accept an entity id as value - added
auto-vertical,topandbottomoption toindicatorconfig - added
topandbottomoption totitle_positionconfig
Vertical Example
- type: custom:bar-card
entity: sensor.test_increase
height: 160px
width: 50px
direction: up
title: Bottom
title_position: bottom
indicator: auto-vertical
- type: custom:bar-card
entity: sensor.test_increase
height: 200px
width: 100px
direction: up
title: Inside
title_position: inside
target: sensor.test_decrease
1 Like
I need some help.
I love the card in following my NAS drive statistics.
I have played with it for a few days but can not seem to get what I want.
I would love the card to show the following.
Color Green from 0-50%
Color Yellow from 51% to 75%
Color Red from 76% on up.
How do I do this with using the hues.
Thank you.
The severity can be a bit confusing, but this should work. The first value defines the color from the min value to the first value and so on. So the second value defines the color from the first value to the 2nd value etc. Hue is defined as degrees on a color wheel like this https://goo.gl/images/S2xYDi.
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'Thanks so much, worked great.
I could probably have worked it through if I had the color wheel.
Some more updates in 0.1.1. You can now define an attribute to display instead of just the state.
- added
attributeconfig option - added
unit_of_measurementconfig option - indicator config is now independant of animation type
- code optimizations
3 Likes
Since update my bar-card changed. It seems I am not able to change it back to the original bars.
Anyone knows what is wrong?
There is nothing wrong. Change your width to 100% and it will be as before.
Some of this might be screwed up since I’ve reworked the CSS to flexbox. I’m currently working another big update that will allow for multiple entities instead of a single entity per card. I’ll add a fix to that release.
Release 0.1.2 adds the option to define a list of entities to display. This also works with auto-entities if you want to populate the list dynamically.
- added
entitiesconfig option, displays multiple bars based on entities list - added
columnsconfig option - title style can now still be defined when using inside title_position
@Plexat You should also be able to fix your alignment problems with these config options.
title_style:
text-align: left
bar_style:
align-items: flex-start
Examples using Auto Entities
- type: custom:auto-entities
card:
type: custom:bar-card
severity:
- value: 50
hue: '0'
- value: 75
hue: '40'
- value: 100
hue: '120'
title_position: inside
columns: 3
padding: 2px
title_style:
text-align: left
font-size: 16px
bar_style:
align-items: flex-start
font-size: 8px
filter:
include:
- entity_id: "*_battery"
- type: custom:auto-entities
card:
type: custom:bar-card
attribute: battery
unit_of_measurement: "%"
severity:
- value: 50
hue: '0'
- value: 75
hue: '40'
- value: 100
hue: '120'
title_position: inside
padding: 2px
columns: 2
filter:
include:
- attributes:
battery: "<=100"
exclude:
- entity_id: "*_humidity"
- entity_id: "*_pressure"
- entity_id: "*_battery"
- type: custom:bar-card
attribute: temperature
unit_of_measurement: "°C"
title_position: inside
columns: 5
height: 200px
min: 15
max: 32
target: 22.5
width: 100%
padding: 2px
direction: up
entities:
- binary_sensor.motion_hallway
- binary_sensor.motion_living_room
- binary_sensor.motion_kitchen
- binary_sensor.motion_bathroom
- binary_sensor.motion_toilet
1 Like
Hi,
I am trying to get this going and have the bar graphs displaying correctly; but they are not named; just show the % free. Any trick to get the friendly name displayed? I checked and the devices being displayed all have friendly_names assigned.
Code below:
- type: custom:auto-entities
show_empty: false
card:
type: custom:bar-card
attribute: battery_level
unit_of_measurement: "%"
severity:
- value: 60
hue: '0'
- value: 80
hue: '40'
- value: 100
hue: '120'
title_position: inside
padding: 2px
filter:
include:
- domain: zwave
attributes:
battery_level: "<= 100"Ahhh! It seems that if the bar graph itself is in the foreground on top of the title; so it gets obscured.
This seems to be new in the latest release; and on all the bar components.
Update: Seems to be a Mac Safari issue. On iOS Safari it is rendered fine; and also on Chrome on Mac it’s fine.
Wow…you have been busy with quite a few updates I see…thanks so much for making this all possible.
I’ll post a screenshot once I have the bar card up and running.
Cheers Steve Wells
1 Like
Can I make a feature request?
Would it be possible to show an icon instead of the title?
EDIT: Also, I am not a CSS expert, in fact I’m not even a CSS anything, but I can’t get card-style to change the background.
I’d like it to be transparent so that when I include a bar-card in an entity card it doesn’t ‘stand out’.
I’ve tried allsorts of combinations (and colours) like this:
Any chance you could give an example?
Unless of course I have completely misundersttod the use of card-style 
card-style:
# paper-card-background-color: 'rgba(0,255,255,0.2)'
background-color: 'rgba(201, 76, 76,0.5)'
# ha-card-background-color: 'rgba(67, 73, 84, 0.6)' # Card background colour