I have the same challenge to get the day name as entity name in the bar card. How can this be done easily with JS code? I dont get it work with config-template-card. Want to have the solcast_forcast_day_{3-7} reverted into normal day name simular to your solution.
Did you try copying the relevant code that I posted above? You’ll need to have the bar card installed as well as config template card.
Yes have installed them both. And used your same code name example.
But with a normal name, its shows the bar-card, but when I put the code instead of a name, the bar-card is not shown, so it process the code wrong. Running 2024.3.2 (but a test pi with 2024.4.0 it is also not working).
The resources and correctly added by HACS, and also tried to restart HA. Any ideas?
Post your code and a screenshot of the card. I’m literally just a script kiddy, but maybe we can figure something out.
Can anyone give an example of making rounded corners? After 2024.4.0 all my cards seem to need to be manually adjusted or the rounded corners are missing.
type: custom:config-template-card
variables:
- states['sensor.date'].state
entities:
- sensor.solcast_pv_forecast_forecast_today
- sensor.solcast_pv_forecast_forecast_tomorrow
- sensor.solcast_pv_forecast_forecast_day_3
- sensor.solcast_pv_forecast_forecast_day_4
- sensor.solcast_pv_forecast_forecast_day_5
- sensor.solcast_pv_forecast_forecast_day_6
- sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
decimal: 0
column: 7
max: 40
min: 0
severity:
- color: rgb(44,153,234)
from: 0
to: 1
#...skipped output for coloring
direction: up
height: 150px
width: 24px
positions:
indicator: 'off'
value: inside
title: 'off'
name: inside
icon: 'off'
animation:
state: 'on'
card_mod:
style: |-
.card-header {
font-size: 18px;
}
bar-card-value, bar-card-name {
font-size: 12px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 1px 1px #0008;
white-space: nowrap;
}
bar-card-value {
margin-right: auto;
margin-left: 6px;
margin-bottom: auto;
margin-top: auto;
}
bar-card-name {
margin-right: auto;
margin-left: 0px;
margin-bottom: -130px;
margin-top: 130px;
right: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px;
border: 1px solid #DDD9;
}
stack: horizontal
title: Forecast
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${ ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()] }
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day 4
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day 5
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day 6
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: Day 7
Just trying one thing at a time here (plus I’m on mobile right now so I can’t test myself). Try this first.
type: custom:config-template-card
variables:
- states['sensor.date'].state
entities:
- sensor.solcast_pv_forecast_forecast_today
- sensor.solcast_pv_forecast_forecast_tomorrow
- sensor.solcast_pv_forecast_forecast_day_3
- sensor.solcast_pv_forecast_forecast_day_4
- sensor.solcast_pv_forecast_forecast_day_5
- sensor.solcast_pv_forecast_forecast_day_6
- sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
decimal: 0
column: 7
max: 40
min: 0
severity:
- color: rgb(44,153,234)
from: 0
to: 1
#...skipped output for coloring
direction: up
height: 150px
width: 24px
positions:
indicator: 'off'
value: inside
title: 'off'
name: inside
icon: 'off'
animation:
state: 'on'
card_mod:
style: |-
.card-header {
font-size: 18px;
}
bar-card-value, bar-card-name {
font-size: 12px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 1px 1px #0008;
white-space: nowrap;
}
bar-card-value {
margin-right: auto;
margin-left: 6px;
margin-bottom: auto;
margin-top: auto;
}
bar-card-name {
margin-right: auto;
margin-left: 0px;
margin-bottom: -130px;
margin-top: 130px;
right: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px;
border: 1px solid #DDD9;
}
stack: horizontal
title: Forecast
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${
['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date().getDay()]
}
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day 4
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day 5
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day 6
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: Day 7
Same result and afterwards the code will me presented back in one line.
Alright. Nuclear option it is. Try this.
type: custom:config-template-card
variables:
- states['sensor.date'].state
entities:
- sensor.solcast_pv_forecast_forecast_today
- sensor.solcast_pv_forecast_forecast_tomorrow
- sensor.solcast_pv_forecast_forecast_day_3
- sensor.solcast_pv_forecast_forecast_day_4
- sensor.solcast_pv_forecast_forecast_day_5
- sensor.solcast_pv_forecast_forecast_day_6
- sensor.solcast_pv_forecast_forecast_day_7
card:
type: custom:bar-card
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomorrow
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: ${ ['Tue','Wed','Thu','Fri','Sat','Sun','Mon'][new Date().getDay()] }
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day 4
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day 5
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day 6
- entity: sensor.solcast_pv_forecast_forecast_day_7
name: Day 7
Hello, I tried to install bar card today and the UI config is totally broken, I can not configure anything, add entities, etc… What is wrong?
Thanks.
That I was trying before. Not working. Seems really something wrong in this line. It will cause the hole graph is not shown. Really weird.
I’m sorry, I wasn’t clear. Make a card using just the code that I posted above (the nuclear option). This is just a bare bones test card to figure out where the trouble is. It’s not intended to be your final pretty card. If it works, then the problem is somewhere in the rest of your code. If it doesn’t, then there’s something wrong behind the scenes.
Nope is not working. The HACS resources are correctly installed ‘custom-template-card’. I even uninstalled and reinstalled it again to be sure that the card is available.
Alright. There’s something programmatically wrong with the install. I’m not saying you did something wrong. But something isn’t playing nice in the background. And that’s way outside my league.
hi, when can i override the border radius theme (ios dark theme) inside of the card?
i can try whith the follow code, but it’s wrong. i can modify the border but not the radius of bar.
card_mod:
style: >
bar-card-currentbar, bar-card-card, bar-card-contentbar,
bar-card-backgroundbar, bar-card-background, bar-card-current {
margin-left: 10px !important;
margin-right: 20px !important;
margin-bottom: 10px;
border-radius: 0px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 0px;
}
or
style: |
bar-card-backgroundbar {
border-radius: 0px;
}
i would to find the border squared, but the ios dark blue theme.
i can try since 5 hours, but i wrong.
Hi guys,
short question: Is it possible to map the value or to show another value (like a helper entity)? I would like to use a string variant instead of the number. Like number 0-66 = ‘Good’.
Hi all,
Struggling to get the animation to work, eventually want it triggered based on binary sensor, but even the basic ‘on’ is not working for me at the moment… Any hints?
- type: custom:config-template-card
variables:
charge_target: states['sensor.i5_m60_xdrive_charging_target'].state
entities:
- ${charge_target}
card:
type: custom:bar-card
column: 1
animation:
state: 'on'
speed: 2
entities:
- entity: sensor.i5_m60_xdrive_remaining_battery_percent
name: Battery
icon: mdi:ev-plug-ccs2
height: 40px
min: 0
max: 100
target: ${charge_target}
severity:
- color: Red
from: 0
to: 25
- color: Orange
from: 26
to: 49
- color: Green
from: 51
to: 100
card_mod:
style: |-
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px;
border: 0px solid;
}
Thanks for the very useful work! Tried to implement this card in a mushroom style dashboard, after some css tweaking this seems to work on a basic level. The standard mushroom collection doesn’t have a counter/gauge/severity tile, so I hope this tweak can be useful to some.
For anyone interested, my code for this card:
type: custom:bar-card
entities:
- entity: counter.regenwater_filter
icon: mdi:water-check
positions:
icon: outside
indicator: 'off'
minmax: 'off'
name: 'off'
value: 'off'
min: 0
max: 365
target: 180
height: 8
severity:
- color: rgb(76,175,80)
from: 0
to: 179
- color: rgb(255,152,0)
from: 180
to: 239
- color: rgb(244,67,54)
from: 240
to: 365
card_mod:
style: >
{% set entity = {
"state": states('counter.regenwater_filter') | int(9999999999),
"name": "Levensduur",
"unit": " d"
}
%} {% set severity = {
"green": 0,
"orange": 180,
"red": 240
}
%} {% set colors = {
"green": "76,175,80",
"orange": "255,152,0",
"red": "244,67,54"
}
%}
ha-card .card-content {
padding: 12px!important;
cursor: pointer;
}
ha-card {
transition-duration: 0.05s;
}
ha-card:hover {
{% if entity.state == 9999999999 %}
background-color: rgba(200,200,200, 0.02);
{% elif entity.state < severity.orange %}
background-color: rgba({{colors.green}}, 0.02);
{% elif entity.state < severity.red %}
background-color: rgba({{colors.orange}}, 0.02);
{%- else -%}
background-color: rgba({{colors.red}}, 0.02);
{%- endif %}
}
bar-card-background {
margin-left: 13px !important;
}
bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar,
bar-card-targetbar {
border-radius: 8px;
}
bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
bar-card-targetbar, bar-card-animationbar {
{% if entity.state == 9999999999 %}
left: 1.5em !important;
width: calc(100% - 1.5em);
{% else %}
{% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
left: {{state_width}}em !important;
width: calc(100% - {{state_width}}em);
{%- endif %}
}
bar-card-markerbar {
display: none;
}
bar-card-background::before {
content: "{{ entity.name }}";
display: flex;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
height: 20px;
letter-spacing: 0.1px;
line-height: 20px;
margin-bottom: 6px;
}
bar-card-background::after {
{% if entity.state == 9999999999 %}
content: "N/A"
{%- else %}
content: "{{ entity.state }}{{ entity.unit}}";
{%- endif %}
font-family: Roboto, Noto, sans-serif;
font-size: 12px;
font-weight: 400;
height: 16px;
letter-spacing: 0.4px;
line-height: 16px;
display: inline-block;
position: absolute;
margin-top: -4px;
width: fit-content;
}
bar-card-iconbar {
{% if entity.state == 9999999999 %}
color: rgba(200,200,200, 1);
background-color: rgba(200,200,200, 0.2);
{% elif entity.state < severity.orange %}
color: rgba({{colors.green}}, 1);
background-color: rgba({{colors.green}}, 0.2);
{% elif entity.state < severity.red %}
color: rgba({{colors.orange}}, 1);
background-color: rgba({{colors.orange}}, 0.2);
{%- else -%}
color: rgba({{colors.red}}, 1);
background-color: rgba({{colors.red}}, 0.2);
{%- endif %}
border-radius: 50%;
}
6 Likes
Hello folks,
currently I am trying to build something like this (taken from Huawei Solar Dashboard)
Focus is at the bar graph itself.
Since ApexCharts for HA does - as far as I know - not support stacked bar graph like this I am currently using bar-card with card-mod and config-template-card [Actually the template card is in this state unnecessary, but it is still in for testing purpose]
However I am facing some issues.
This is what I currently have achieved (bottom 2 bars), using 2 templates to calculate the %-values.
Is there any way I can replace the displayed value for Min/Max (in this case 11% and 89 or 90%), without it affecting the bar length?
Because if I replace the MIN with config-template-card there is never a bar shown since the Min-value equals thecurrent value.
type: custom:config-template-card
variables:
- states['sensor.pv_energy_daily'].state
entities:
- ${vars[0].entity_id}
card:
title: Version 3
type: custom:bar-card
decimal: 2
positions:
icon: 'off'
entities:
- entity: sensor.pv_energy_daily
- entity: sensor.grid_export_energy_daily
complementary: false
- entity: sensor.home_selfuse_energy_daily
complementary: false
max: ${vars[0] }
- entity: sensor.percent_selfuse_vs_export
unit_of_measurement: '%'
positions:
icon: 'off'
indicator: 'off'
minmax: inside
value: inside
name: 'off'
title: inside
- entity: sensor.percent_export_vs_selfuse
unit_of_measurement: '%'
positions:
icon: 'off'
indicator: 'off'
minmax: inside
value: inside
name: 'off'
title: inside
card_mod:
style: |
.contentbar-direction-right {
flex-direction: column;
}
.min-direction-right {
margin: 0px;
margin-left: 4px;
margin-right: auto;
margin-bottom: -20px;
bottom: 10px;
}
bar-card-value {
margin: -11px;
margin-left:
}
bar-card-name {
margin: 0px;
}
bar-card-max {
margin: 0px;
margin-left: auto;
margin-top: 0px;
top: 10px;
font-size: 15px
}
bar-card-min {
margin: auto;
margin-left: auto;
margin-top: auto;
top: 10px;
font-size: 15px
}
bar-card-divider {
display: none;
}
Any help would be appreciated.
