Oh, never faced this… But - I am not using “color_thresholds” myself, so cannot say for sure)))
Yeah, for some reason this one needs it. Without the max the peak will always transition to black. 
- type: custom:mini-graph-card
name: UV
icon: mdi:weather-sunny-alert
entities:
- entity: sensor.openweathermap_uv_index
name: UV Index
- entity: sensor.nighttime_number
color: var(--custom-color-gray)
show_line: false
show_points: false
show_legend: false
y_axis: secondary
lower_bound: 0
upper_bound: 15
hours_to_show: 24
hour24: true
smoothing: true
points_per_hour: 1
line_width: 2
show:
extrema: true
labels_secondary: false
# https://en.wikipedia.org/wiki/Ultraviolet_index
color_thresholds:
- value: 0
color: var(--custom-color-green)
- value: 5
color: var(--custom-color-yellow)
- value: 8
color: var(--custom-color-red)
- value: 11
color: var(--custom-color-magenta)
Interesting, I will try to reproduce it with some “input_number” and same values (w/o the 2nd entity).
Weirdly this one works perfectly fine for me with your uploaded code (and one of my own thermometers)
Have you tried another browser and/or cleared your cache?
Thanks all, will try with the min / max values.
The fact it work out of the box on some installs is a what worries me. I did try different browsers but all behave the same. This lead me to believe it is the ha install.
No.
People have:
- Different card configs:
– someone is happy to see a smoothed graph with 24 points a day for a sensor which is updated every minute;
– someone adds more complexity to his cards - sometimes not really needed. - Different “eyes”:
– someone can’t see obvious errors;
– someone just does not care about small glitches since HA does the main task.
@Ildar_Gabdullin I believe they are referring to my comment above where I directly copy/pasted their card config into my instance with one of my sensors and it worked, whereas the exact same code doesn’t work in their instance. That’s what they mean by “[this code] is working out of the box for others but not me”
This is normal that something may work w/o any glitches in other conditions.
so trying the min/max value didn’t make any changes!
I also noticed, maybe completely unrelated, that trying to make changes to the styles (ie. removing borders) doesn’t work either
How do you do it?
Also, when saying “I did smth and failed” - consider attaching a SHORT MINIMAL code reproducing your issue and a screenshot, if you really want to help people to help you.
the whole code is
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: sensor.0x00158d0006a03511_temperature
name: Living Room
icon_type: null
tap_action:
action: navigate
navigation_path: livingroom
style: |
ha-card{
background-color: rgba(0,0,0,0);
border-radius: 20px;
box-shadow: none;
border-style: hidden;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: sensor.0x54ef441000246042_action
icon: mdi:lightbulb
use_light_color: false
alignment: end }
style: |
ha-card{
background-color: rgba(0,0,0,0);
border-radius: 20px;
box-shadow: none;
border-style: hidden;
}
- type: custom:mini-graph-card
entities:
- sensor.0x00158d0006a03511_temperature
show:
state: false
name: false
icon: false
fill: fade
line_width: 2
color_thresholds_transition: smooth
color_thresholds:
- value: 0
color: '#3154AC'
- value: 16
color: '#6AACD9'
- value: 18
color: '#75D89A'
- value: 20
color: '#35B840'
- value: 22
color: '#FF6600'
- value: 26
color: '#FF0000'
- value: 30
color: '#FF69B4'
points_per_hour: 1
hours_to_show: 48
style: |
ha-card{
background-color: rgba(0,0,0,0);
border-radius: 20px;
box-shadow: none;
border-style: hidden;
}
and the output is:
which is not what I am expecting. I would like the graph to have colors
and not to have borders.
the code, seem to be ok, so I am wondering what I am missing? is there another plugin I need to something like this ?
thx
You are using mini-graph-card in a stack-in-card.
Read the Docs for stack-in-card. Some options of the stack prevent styling of your mini-graph-card.
In general, always check styles in a standalone min-graph-card first.
What you posted is a bunch of custom cards unrelated to mini-graph-card.
I forgot to mention that I obviously tested the mini graph on its own and result is the same.
type: custom:mini-graph-card
entities:
- sensor.0x00158d0006a03511_temperature
show:
state: false
name: false
icon: false
fill: fade
lower_bound: 10
upper_bound: 20
line_width: 2
color_thresholds_transition: smooth
color_thresholds:
- value: 0
color: '#3154AC'
- value: 16
color: '#a83232'
- value: 19
color: '#75D89A'
- value: 20
color: '#35B840'
- value: 22
color: '#FF6600'
- value: 26
color: '#FF0000'
- value: 30
color: '#FF69B4'
points_per_hour: 1
hours_to_show: 48
style: |
ha-card{
background-color: rgba(0,0,0,0);
border-radius: 20px;
box-shadow: none;
border-style: hidden;
}
result
Just noticed - these options are misplaced.
rtfm
I have the following 
if I save anyways, no change in style.
what am I missing here ? it is clearly something on my end but can’t figure it out.
actually I got it workinf, lower and upper are not necessary. I believe the issue I had was the thressold where too close to one another, making the color hidden by the smooth value.
There are some issues related to thresholds, all posted in Github.
In general, thresholds work fine.
- Do you have card-mod installed?
- It used to be
type: any card
...
style:
...
then starting from ~card-mod 3 it became
type: any card
...
card_mod:
style:
...
In most cases (except picture-elements) it work anyway, but old notation causes this warning in UI editor.
Thanks !!! that was the missing link ! all is working great now !