You could use canvas-gauge.
It does have some sizing issues with picture-elements in that it must be sized in pixels and not % like most things, but it does work:
Both offered solutions look good, but i’ll try out VDRainers first 
Hi @VDRainer
It seems to work somehow…
but the inner part isn’t 100%…
It looks more like a dial instead of a gauge…the center should be black too
Any ideas ??
Oh…and I found this repository, which appears to be identical to your modifications…yours??
Although the initials seems to be from @GlennHA 
@GlennHA
And canvas doesn’t support attributes ??
Not really an issue, but would be nice if I don’t have to convert my existing attributes into sensors
What if you try the default HA dark theme?
No, but looks like someone had the same idea.
Even the colors in the example are 100% the same. 
Tried that…also tried the default (light) HA theme…
The only thing that seems to work is to change the z-index and top % of gauge-a.
That brings a background circle to the foreground.
using z-index 3 and top 25%:
But then I have issues getting it to fit the picture correctly 
Hmm…just had another look…
it seems gauge-a is correct, it is the (black)background of the gauge.
But there is another disk missing on the foreground (should be dark greyish like my page’s background)
And i don’t actually think it is because your modifications either….anyway, i’ll investigate 
Hi @VDRainer ,
I’m using your custom, replace the code in js and use this
- type: custom:gauge-card
entity: sensor.processor_use_percent
title: Processor
measurement: '%'
scale: 30px
severity:
- style: var(--green-color)
value: 0
- style: var(--orange-color)
value: 71
- style: var(--red-color)
value: 90
But it appear like in the picture.
So do I missed something? Please help me.
Do you mean the inner circle of the gauge?
That depends on the theme and i have no clue which theme variable it is.
Or do you mean the colors?
Did you define the green-color, orange-color or red-color in your theme?
1 Like
Sorry for not explain clearly
I mean the color in severity. I did declare and test the 3 colors already.
green-color: rgba(52,219,126,0.8)
orange-color: rgba(255,159,9,0.8)
red-color: rgba(229,50,45,0.8)
More:
The second gauge I use this
severity:
- style: green
value: 0
- style: orange
value: 71
- style: red
value: 90
But it seem no effect on 2 gauges.
Try:
severity:
- style: green
value: 70
- style: orange
value: 90
- style: red
value: 100
From the Big number card.
Values are the upper limit until which that severity is applied
Hi All
I have a gauge card that displays a time value in hours. It is displaying this in decimal and I’m wondering what the best way to display as hours and minutes would be. Any suggestions?
Many thanks
Johnny
Hi all,
i used the custom gauge card in a picture-element card. But it looks from styling perspective weird.
Has someone also the issue and fixed it?
- type: custom:gauge-card
title: Pellets
entity: sensor.eta_xxxxx
measurement: kg
min: 1
max: 4500
needle: true
severity:
green: 2500
amber: 1200
red: 1
style:
top: 30%
left: 10%
remove the border with card-mod:
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}