Also if you want to create a bar from right to left, just use
min: 100
max: 0
I finally got it working.
So I had to use Config-template-card to alter the values for Min, Max and Target.
When altering Min, Max the bar would never display, therefore I calculate a new value for the target value to indicate the percentage, in this case it was around 42 I think. So the target has to be set at 42 (from the 100-0 scale) to represent 71% length.
Here is the code for the sensor that I use as target value:
l is the left value, r the right.
the sensors I use for l and r are complementary, that means the always add up to 100. You probably can also do it with just one sensor and then just substract 100 for the other.
- name: percent_calculated_bar
unique_id: percent_calculated_bar
state: >
{% set l = states('sensor.percent_selfuse_vs_export')|float(0) %}
{% set r = states('sensor.percent_export_vs_selfuse')|float(0) %}
{% set m = ( ( states('sensor.percent_export_vs_selfuse')|float(0) - states('sensor.percent_selfuse_vs_export')|float(0))|abs)|round(0) %}
{% if l > r %}
{{ ( l - ( l * m / 100 ) )|round(0) }}
{% endif %}
{% if r >= l %}
{{ ( l + ( l * m / 100 ) )|round(0) }}
{% endif %}
The code of the card is as follows (did not mess with coloring yet):
Used cards apart from bar card are config-template-card and card-mod
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-entity-card
entity: sensor.solar_yield_energy_daily
name: Energieertrag
layout: vertical
icon_type: none
title: Custom Stack in
card_mod:
style: |
:host {
--stack-card-margin: 0px;
--ha-card-border-radius: 0px;
--ha-card-border-width: 0px;
--ha-card-border-color: green
} ha-card {
margin: -10px
}
- type: custom:config-template-card
variables:
- states['sensor.percent_export_vs_selfuse'].state
- states['sensor.percent_selfuse_vs_export'].state
- states['sensor.percent_calculated_bar'].state
entities:
- ${vars[0].entity_id}
- ${vars[1].entity_id}
- ${vars[2].entity_id}
card:
type: custom:bar-card
decimal: 2
entity_row: 3
positions:
icon: 'off'
entities:
- entity: sensor.percent_selfuse_vs_export
unit_of_measurement: '%'
max: ${vars[0] }
min: ${vars[1] }
target: ${vars[2] }
positions:
icon: 'off'
indicator: 'off'
minmax: inside
value: 'off'
name: 'off'
title: inside
color: green
card_mod:
style: |
ha-card {
border-top: 0px;
border-bottom: 0px;
border-width: 10px;
border-color: transparent;
border-radius: 5px;
}
.contentbar-direction-right {
flex-direction: column;
}
:host {
--stack-card-margin: 0px;
}
.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-markerbar {
display: none;
}
bar-card-max {
margin: 0px;
margin-left: auto;
margin-top: 0px;
top: 10px;
font-size: 15px;
color: black;
}
bar-card-min {
margin: auto;
margin-left: auto;
margin-top: auto;
top: 10px;
font-size: 15px;
color: black
}
bar-card-currentbar {
background: lightgreen;
}
bar-card-divider {
display: none;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: sensor.home_selfuse_energy_daily
name: Eigenverbrauch
icon_type: none
- type: custom:mushroom-entity-card
name: Netzeinspeisung
icon_type: none
alignment: end
layout: vertical
entity: sensor.grid_export_energy_daily
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: end;
}
card_mod:
style: |
:host {
--stack-card-margin: 0px;
--ha-card-border-radius: 0px;
--ha-card-border-width: 0px;
--ha-card-border-color: purple;
} ha-card {
border: true;
border-width: 0px;
stack-card-margin: 0px;
border-color: blue;
margin: -10px 0px -10px 0px
}
card_mod:
style: |
:host {
--stack-card-margin: 0px;
--ha-card-border-radius: 0px;
--ha-card-border-width: 0px;
--ha-card-border-color: green
} ha-card {
border: true;
border-width: 0px;
stack-card-margin: px;
border-color: red;
box-shadow: none;
padding-top: 0px;
padding-bottm: 0px;
margin:
}
Found one issue though. If both values are 50% the bar looks like this…
2 Likes
Does anyone know how I can display a currency symbol $ in front an entity being used in the bar card, or even just display a different entity’s value? I have another entity which contains the exact value I want to display, i.e. “$5.9 USD”
I’ve tried card-mod, card-templater without much success.
I was able to get this working on a forked version of the gauge card, where the author added an configuration item called: “valueEntity”:
If this is not currently possible, I can open a feature request.
Please show your card-mod try, I may point at possible error.
Here is what I’m using:
type: custom:config-template-card
entities:
- sensor.energy_cost_4244_today_string
card:
type: custom:bar-card
max: 30
severity:
- color: Red
from: 21
to: 30
- color: Orange
from: 11
to: 20
- color: Green
from: 0
to: 10
entities:
- entity: sensor.energy_cost_4244_today
card_mod:
style: |
bar-card-value {
color: yellow;
}
Which renders as:
Try
- type: custom:bar-card
title: prefix
entities:
- entity: input_number.test_level_1
card_mod:
style: |
bar-card-value:before {content: "$ "}
This worked like a charm!! Thank you so much 
Btw - why do you use CTC (config-template-card) here?
style mod doesnt work 
Whats wrong?
I want to have text rotate 270°…
type: custom:bar-card
stack: horizontal
name: retence
decimal: 0
max: 173
min: 0
direction: up
height: 200px
width: 35px
animation:
state: 'on'
speed: 2
positions:
indicator: inside
icon: 'off'
style: |-
bar-card-name {
font-size: 22px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 0px 0px #0008;
white-space: nowrap;
font-weight: bold !important;
}
entities:
- entity: sensor.retence_hladina
Start with fixing a card-mod syntax, you are missing a “card_mod” keyword.
Thats what I use. It looks like same to my code, but my doesnt work…
When I try to add:
card_mod:
before the line with style: |- this lines under card_mod immediately dissapear.
style: |-
bar-card-name {
font-size: 22px;
transform-origin: 0 0;
transform: rotate(270deg);
text-shadow: 0px 0px #0008;
white-space: nowrap;
font-weight: bold !important;
}
That never happed to me, only in this bar-card…
It should be
...
card_mod:
style: ....
If you observe a “card_mod code is automatically deleted in UI editor” behaviour:
yes, it happens with SOME cards in UI editor, there is an issue on card-mod github.
A humble advice: do not use a dashboard in a “storage mode” (i.e. managed in UI) as a “main” dashboard, use it ONLY for testing (i.e. use dashboards in “yaml mode” for basic ones) because all your cards (not a card-mod code only) may magically disappear.
Thanks! Whe I edit it in RAW mode it works.
But you scaring me … lost all in dashboard
I use UI because it more clear for me. Especially with new Sections view type. Really like the easy way how you can reorganize sections and cards.
But I hope when I make a backup of entire dashboard via RAW configuration editor (simply copy the full code there to any external file) than its ok and I can restore it if something happend.
searched for “repository” and “maintained” in the thread without finding much so gonna ask,
is this the current repo you’re all using? GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace
it looks long dead since covid hit, the UI for adding cards is completely broken,
so are you all just hammering it around like a zombie to keep it working while it gets more broken and wonky after each HA release…?
I saw some forks but not sure if there is an official one
What is exactly “gets more broken and wonky after each HA release”?
As for “broken UI” - come on, nobody using UI except beginners.
I am a professional dev yet can use some GUI convenience every once and then, plus building on top of a dead repo is by definition fragile
It works more or less.
Again about UI: many experienced users use yaml mode dashboards and do not care about UI.