Dynamic color change with color_threshold not working at all

MrFr33man123 commented 1 year ago

With the example code it isn't even working.

Version 0.11.0 HA: 2023.7.4

entities:
  - sensor.klima_wohnzimmer_temperature
show:
  labels: true
color_thresholds:
  - value: 20
    color: '#f39c12'
  - value: 21
    color: '#d35400'
  - value: 23.5
    color: '#c0392b'

I tried also with the color transition smooth option. Nothing helps.

ildar170975 commented 1 year ago

To simplify a task for people, suggest to use normal human-readable names for colors instead of cryptic hexes (and “hard” transition to see changes clearly). IMHO using hexes in Readme for this demo is not a good way… Please test with rather different colors like red, cyan, yellow.

ildar170975 commented 12 months ago

@MrFr33man123 Although hex colors are less clear for people, here is my test with hex colors (to simulate your case). I chose colors which are easier to imagine - ff0000 (red), 00ff00 (green), 0000ff (blue):

type: custom:mini-graph-card
entities:
  - sensor.xiaomi_cg_1_co2
show:
  labels: true
color_thresholds:
  - value: 560
    color: '#0000ff'
  - value: 600
    color: '#00ff00'
  - value: 650
    color: '#ff0000'

Some colors are rather similar, so it is advised to use color_thresholds_transition: hard for testing:

Note that in your example the lower bound (22.05) is greater than the 1st & 2nd thresholds (20, 21). Here is a simulation:

With hard transition:

And now with colors from your example:

Even with a hard transition the border between colors is slightly visible. No wonder it is almost invisible with a smooth transition... I would say that this example from a Readme is not really helpful))))

Not to mention a fact that in your particular case all points are inside ONE interval:

kalkih / mini-graph-card

Dynamic color change with color_threshold not working at all #989