after upgrading to 0.113 there are no bars anymore? I just get the number, but no colored bars…
Edit: seems to be themes specific… I had some old themes in themes.yaml and switched now over to themes folder and HACS installed themes. They seem to work.
3 Likes
Is there a way to truncate or round the value displayed by the big number card? E.g. I may have a sensor with value 12.34568 C but I only care about the first decimal place on the UI.
I’d like to avoid creating additional template sensors to just achieve the rounding. I guess that having a template for the display value in the card config itself would make me happy.
Hi, I really like this card, but some of my sensors have quite long units which don’t work well in the same font size as the main value of the sensor. It would be nice to be able to change them separately.
Hello, is it possible to use a this with a sensor prefixed with $? I have a ROI value in dollars but it doesn’t seem to work. I could use a unit of measure on the sensor but then the $ is behind the value. I’d like the ROI value to slowly go left/right based to show when return catches up with expense of the system.
Sensor is a non-numeric value so perhaps I need to make a duplicate sensor without the dollar?
Anyone know to get this look with BigNumber card?
With Time on top and date at the bottom? Note there are no breaks in between.
type: entities
entities:
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: custom:bignumber-card
entity: sensor.time
scale: 30px
style: |
ha-card {
background: none;
box-shadow: none;
padding: 0px 10px;
font-weight: bold;
}
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:bignumber-card
entity: sensor.svatek_dnes
scale: 15px
style: |
ha-card {
background: none;
box-shadow: none;
font-variant: small-caps;
padding: 0px 10px;
}
- type: custom:bignumber-card
entity: sensor.date_short
scale: 15px
style: |
ha-card {
background: none;
box-shadow: none;
font-variant: small-caps;
padding: 0px 16px;
}
Have just one unsolved issue - I am not able to adjust height of the whole card 
1 Like
Dear All, this card is perfect, however im stuck in getting any colors into it. Can not figure out what im doing wrong. Have tried to copy directly from some examples above, no changes.
No matter what I do, I get the value as a nice number in black with white background. No bars. This is my current version, no bars or colors
I always get this result
Is there a way to disable the click of the bignumber card? Such that if someone clicks on it, it does nothing. I just want it to display a number, nothing else.
thanks in advance!
Can the min value be a negative one? I tried with a negative number and it doesn’t seem to work…
- type: horizontal-stack
cards:
- type: custom:bignumber-card
entity: sensor.sensor_name
scale: 20px
from: center
severity:
- value: -5000
style: "var(--label-badge-red)"
- value: 0
style: "var(--label-badge-yellow)"
- value: 10000
style: "var(--label-badge-green)"
2 Likes
I’m struggling with being able to set certain colours for severity.
Yellow works as below:
bnStyle: var(--label-badge-yellow)
However I orange does not when I use this (it produces a blue bar, not orange):
bnStyle: var(--label-badge-orange)
Is there a restriction on the colours allowed?
It seems like the documentation above is out of date: Tthe severity colors are now named bnStyle instead of style for the bar colors to work. Also, it seems that you can set a color in the severity to change the color of the number for that severity.
I’m trying to find a way to do a couple of things with this card:
-
Change the background colour, so that the “unfilled” part of the card isn’t plain white or black. I’d like it to be more in keeping with my theme.
-
Change the size of the font used, which is just too big sometimes if you have a few of the cards in, say, a horizontal stack.
I’ve tried adding card-mod styling by having the following:
type: custom:bignumber-card
entity: sensor.mqtt_consumption
title: Consumption
scale: 40px
min: 0
max: 18000
hideunit: false
from: bottom
severity:
- value: 2000
bnStyle: var(--label-badge-green)
- value: 4000
bnStyle: var(--label-badge-yellow)
- value: 18000
bnStyle: var(--label-badge-red)
color: '#FFFFFF'
card_mod:
style: |
ha-card {
background: var(--ha-card-background);
font-size: 15px;
}
The card is then coloured differently, and according to my theme, but there are no longer any severity bars. And it doesn’t seem to matter what I have for font-size, it doesn’t change. Things like font-weight do work though. Any ideas?
1 Like
Answering my own post, this did the trick as far as background colour is concerned:
card_mod:
style: |
ha-card {
--card-background-color: var(--ha-card-background);
}
3 Likes
Hello, is there any way to put in min/ max variable values? Like:
entity: input_number.monatliche_ausgaben
title: Monatliche Ausgaben
scale: 35px
hideunit: true
min: 0
max: '{{(states("input_number.monatliche_einnahmen")|int)}}'
from: bottom
severity:
- value: {{(states("input_number.monatliche_einnahmen")|float) *(1/3)}}
bnStyle: var(--label-badge-red)
- value: {{(states("input_number.monatliche_einnahmen")|float) *(2/3)}}
bnStyle: var(--label-badge-yellow)
- value: {{states("input_number.monatliche_einnahmen")|float}}
bnStyle: var(--label-badge-green)
color: '#FFFFFF'
2 Likes
anyone able to get one of the values to flash? I have mine setup for outside real feel and if it goes above 100 Id like to to flash the red. Pulled the below code from my motion sensors but i cant seem to figure out how to add the code.
state:
- value: 'on'
color: red
icon: mdi:alert
styles:
card:
- animation: blink 2s ease infinite
Is there a way to use severity colors - but not the bar?
Hi Phillip,
I know im bumping an ole post here - but, did u ever dive down that rabbit hole?
Im trying to do the same thing and wondering if it is possible.
br
I’m afraid I did not, though it’s a recurring thing in other cards where it would be nice to have these magic numbers be configurable elsewhere. I’m not sure it’s a fixed problem, yet
Can u add “tap action”?
thanks
Hi,
I found a workaround. may not work with every scale.
Try this. (see the comments for A & B)
type: custom:bignumber-card
entity: sensor.your_sensor_here
title: your title here
from: bottom
scale: 30px #play with this value A
hideunit: false
round: 0
min: 0
max: 3000
severity:
- value: 50
bnStyle: var(--label-badge-blue)
- value: 500
bnStyle: var(--label-badge-green)
- value: 1000
bnStyle: var(--label-badge-yellow)
- value: 2500
bnStyle: var(--label-badge-red)
color: '#FFFFFF'
card_mod:
style: |
ha-card {
font-weight: regular;
padding: 100px 0px; #play with this value B
}