I found it in HACS and installed it about 15 minutes ago. It’s working well. I just have rounded ends on the bars (no CSS), and I don’t know why when every image I see shows squared-off bar ends.
EDIT: Ahh. I have bar height set to 30px, which means the radius on the bar corners makes them look completely round. I was able to customize with card mod.
Is it possible to set the max value dynamically when using auto entities? I want to show the power usage of my smart sockets and set the max value to the value of the socket that is consuming the most power.
Here’s what I have with a static max value:
type: custom:auto-entities
show_empty: false
card:
type: custom:bar-card
direction: right
entity_row: true
min: 0
max: 14
height: 20px
stack: vertical
decimal: 1
positions:
icon: 'off'
indicator: outside
name: inside
value: inside
severity:
- color: '#a1a1a18a'
from: 0
to: 2
- color: '#3ea8328a'
from: 2
to: 10
- color: '#85a8328a'
from: 10
to: 50
- color: '#a8a4328a'
from: 50
to: 200
- color: '#a887328a'
from: 200
to: 500
- color: '#a867328a'
from: 500
to: 1000
- color: '#a846328a'
from: 1000
to: 3000
- color: '#a832328a'
from: 3000
to: 10000
filter:
include:
- entity_id: sensor.socket_*_power*
exclude:
- entity_id: sensor.*_kilowatt
sort:
method: state
reverse: true
numeric: true
Hei all, thanks firstly for the awesome content here, helped me loads!
Now My issue is: I have a picture elements card where I want to present the SOC of my vehicle. When charging, I want to animate the bar. I already copied some code snippets from you guys, but I cant seem to style my bar card with css and perform the positioning:
Nothing works anymore, and my “top” and “Left” Positioning is not possible. When I delete top and left positioning, my bar disappears on the picture elements card… Could someone help me out here perhaps? Would be awesome!
I just realized that this card doesn’t represent data accurately anymore. I assume since support stopped in 2020 things have broken?
Data should be 572, but its sitting at 451gb and randomly changes, sometimes going down.
Clikcing on the graph to get the history shows the correct history graph, but the bar graph still show incorrect information
I have also been thinking about it - to show net power Grid activity (import/purchase vs export/generation) and could not find an easily identifiable solution from other posts in this thread - though may have missed something.
3 possible ideas come to mind (not tested/proved yet):
1 - use a background colour for values less than zero, and make the target zero. Then apply the ‘negative’ severity colour to the target [this is the bit i cannot find - can you set the specific target colour in the config?] Then as the bar recedes below zero it will reveal the negative colour as if it is moving from the centre.
2 - Maybe use the gradient fill idea from Lovelace: Bar Card - #720 by RavingRobot post; I have only just seen this so it likely needs checking as appropriate for your/mine situation.
3 - The other idea that looks worth investigating is the hide option, that was explained elsewhere (create 2 bars, one for positive, other for negative, one from left other from right), effectively only showing positive or negative according to the entity value. Without a target colour setting, this looks like the fallback.
as I can observe, the actual value is noticed fine, and displayed inside the bar, however, the colors and the graphs are not using that value so it seems.
sorry, i have no answer to your question, but i´d like to know, how you reduced the height of the rows, including the gaps between them.
I managed to adjust the height, but the result is, that the gaps become bigger.
The actual size of the card does not change.
Hi all, I need help to customize my bar card. I need to center title header ad round square the bar. I don’t know how to combine the styles.
Here is the code to title center:
Hi all, is it possible to set the “max” out from a value of a sensor? I would like to use to sensor in the top (consumption) as max for all of them. Many thanx in advance.