Color tresholds are too subtle

[molnarti]

I am pretty sure I am doing something wrong, but cant figure out what. I am using the following code to change the line color according to the temperature:

type: custom:mini-graph-card
name: Temperature
icon: mdi:temperature-celsius
points_per_hour: 4
font_size: 160
name_adaptive_color: true
entities:
  - entity: sensor.outside_zb_temp
    name: Outside temp
    show_state: true
    state_adaptive_color: true
    lower_bound: -10
    upper_bound: 40
  - entity: sensor.temp_sensor
    name: Inside temp
    color: '#ad5e6a'
    show_line: false
    show_graph: false
    show_state: true
    show_legend: true
    state_adaptive_color: true
    line_width: 2
    show_fill: true
    hours_to_show: 24
show:
  labels: true
  legend: false
color_thresholds:
  - value: -20
    color: '#497af5'
  - value: 0
    color: '#82c4eb'
  - value: 15
    color: '#47ba4e'
  - value: 25
    color: '#eb9834'
  - value: 30
    color: '#e3141b'

the result looks like this:

the line is solid green, while i'd expect it to be rather blue-ish and have some kind of more prominent gradient given the temperature range between 9-13 C. if the temperature goes above 15 the whole graph turns green, even the parts below 15 C

when I hover on the graph it turns blue, matching the color setting in the code - while its more "correct", it still does not have any gradient indicating the change in the temperature

Also then there is a temperature range across different thresholds, upon hover they are shown, but without hover i just get the whole line in the color of the current temperature (mostly).

I know about the "hard" transition parameter, but I want gradient transitions.

I think the issue here is, that the color of a line at a given time changes according to the temperature that occurs later on. E.g. if the temperature at 6:30 was 12 C it gets assigned a blue color, but if the temp raises during the day to lets say 20 the point at 6:30 changes its color. Is there a way to make it constant somehow?

[Arcane1980]

If you like, I have created the a colour increment for every 3 degrees celcius.

I have used your code below (with my sensors) and changed the points per hour to only 1. The blue circles are the points that you have allocated, and having 4 per hour on a 24 hour display ends up quite full. The code below gives me the following results:

As you can see, the smaller increments mean that even this small graph (that only goes from 16 deg to 22deg (the 12 is the other sensor) yet you can see the gradient from yellow to green.

type: custom:mini-graph-card
name: Temperature
icon: mdi:temperature-celsius
points_per_hour: 1
font_size: 160
name_adaptive_color: true
entities:
  - entity: sensor.lounge_temperature_feels_like
    name: Outside temp
    show_state: true
    state_adaptive_color: true
    lower_bound: -10
    upper_bound: 40
  - entity: sensor.lounge_climate_react_low_temperature_threshold
    name: Inside temp
    color: '#ad5e6a'
    show_line: false
    show_graph: false
    show_state: true
    show_legend: true
    state_adaptive_color: true
    line_width: 2
    show_fill: true
    hours_to_show: 24
show:
  labels: true
  legend: false
color_thresholds:
  - value: -6
    color: '#272161'
  - value: -3
    color: '#2D388A'
  - value: 0
    color: '#3F559E'
  - value: 3
    color: '#5876B6'
  - value: 6
    color: '#748EC7'
  - value: 9
    color: '#93ABD9'
  - value: 12
    color: '#A6C1DC'
  - value: 15
    color: '#ACD1C0'
  - value: 18
    color: '#D7DD83'
  - value: 21
    color: '#ECD76A'
  - value: 24
    color: '#E6B33E'
  - value: 27
    color: '#DC9322'
  - value: 30
    color: '#D47322'
  - value: 33
    color: '#CC5626'
  - value: 36
    color: '#C2421F'
  - value: 39
    color: '#B32A17'
  - value: 42
    color: '#9B1015'
  - value: 45
    color: '#450516'

[molnarti]

i seems somehow my issue got resolved with the subsequent releases (or the higher temperatures) and the colors are displayed correctly including the transitions

[ildar170975]

This issue itself rather questionable:

1. Create mini-graph-card with these settings:

• similar colors in color_thresholds, and of course define them in hex to make them looking as cryptic as possible;
• use a default color_thresholds_transition: smooth.

2. Then complain.