Modified bar-card.js file is attached in previous post but it was for first version 0.0.1, in new version 0.0.2 it should be possible without editing source file but I haven’t tried it yet
Good point. It could be possible to achieve that result with the new CSS styles, however it might be somewhat tricky.
I was actually working on adding an “inside” option to the “title_position”, but was having a bit of trouble. So I decided to release CSS styles first, however considering that more people would like to have this option I will try to add it this weekend.
It would great, TOPs3c’s Bar shape looks really good. I would really like to be able to replicate it.
Thanks.
Added ‘inside’ option for title_position in release 0.0.3.
By default the text will be centered but you can use the bar CSS style to align it to the left side like T0ps3c’s example.
bar_style:
text-align: left
padding-left: 4px
1 Like
Thank you for your answer.
I can’t figured out how to replicate it, could you please help me. Here is my code so far:
- type: custom:bar-card
title: mem
entity: sensor.memory_use_percent
bar_style:
text-align: left
padding-left: 4px
rounding: 5px
height: 30px
style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'You need to define the title_position.
title_position: inside
1 Like
Sorry to be dumb but it doesn’t work. My code is probably wrong:
- type: custom:bar-card
title: mem
entity: sensor.memory_use_percent
bar_style:
text-align: left
padding-left: 4px
title_position: inside
rounding: 5px
height: 30px
style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
from: left
min: 0
max: 100
saturation: 50%
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
Thanks
No worries, I probably didn’t explain it properly. The title position isn’t part of the bar style. It’s a card config.
- type: custom:bar-card
title: mem
entity: sensor.memory_use_percent
title_position: inside
bar_style:
text-align: left
padding-left: 4px
border-radius: 5px
height: 30px
style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
min: 0
max: 100
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
Modified your code a bit as well.
1 Like
Thank you very much Gluwc you are the man.
Sorry but i still have a strange result:
You will either have to reduce the font size or increase the bar height to make the text fit the bar.
Ok thanks Gluwc.
Sorry to bother you with this but i can’t find the option to reduce the font size.
Font size is defined by the bar_style CSS when the title is inside the bar. If you want a smaller font just add font-size.
- type: custom:bar-card
title: mem
entity: sensor.memory_use_percent
title_position: inside
bar_style:
text-align: left
padding-left: 4px
border-radius: 5px
font-size: 10px
height: 30px
style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
min: 0
max: 100
severity:
- value: 50
hue: '120'
- value: 75
hue: '40'
- value: 100
hue: '0'
1 Like
Thank you 
Thanks for that share @jimpower
The sensor works but I get this warning after a ha restart.
Do you know how to avoid this?
Template sensor sensor_count has no entity ids configured to track nor were we able to extract the entities to track from the value template(s). This entity will only be able to be updated manually.
you could add an entity_id to your template, I personally don’t and it doesn’t effect the operation of the sensor.
ok thanks, so I will keep it like it is.
I have for of those sensors (automations, sensors, binary_sen, scripts).
I also don’t have a sensor.date entitiy but a sensor.time entity
So do I jsut have to add
entity_id: sensor.time
to each of those sensors to get rid of this … and satiesfie my OCD?
You could but I wouldn’t! It will then update your template sensors every second.
Better (IMHO) to also include the date sensor like you have with time:
- platform: time_date
display_options:
- 'time'
- 'date'