bug(color_thresholds): defaults to black instead of closest out-of-bounds color

I have a graph meant to graph wind speed in different colors as you can see in the code. Though I find myself with an issue, if the color threshold value its not reached, the color it uses is black until (if it ever does) reaches the next value, In the image below you can see that in never reached purple color value, and therefore it started graphing towards black, if it ever reached the purple value, then the graph would be render towards that color.

How can I fix this?

Am I doing something wrong or is this an issue with the card

  - type: custom:mini-graph-card
    entities:
      - entity: sensor.aemet_wind_speed_kts
      - entity: sensor.aemet_wind_bearing
        show_state: true
        y_axis: secondary
        color: var(--accent-color)
    name: Viento 7d
    icon: mdi:weather-windy
    line_width: 1
    font_size: 70
    animate: true
    color_thresholds:
      - value: 5
        color: '#0095a6'
      - value: 10
        color: green
      - value: 16
        color: orange
      - value: 24
        color: red
      - value: 30
        color: purple
    hours_to_show: 168
    points_per_hour: 0.2
    lower_bound_secondary: 0
    upper_bound_secondary: 360
    show:
      average: true
      legend: false
      extrema: true

[StormyKnight17]

I noticed this too, it seems that color names don’t always work. If I use ‘#######’ it does render correctly for me.

[jlsjonas]

Sadly enough I’m having a hard time reproducing the issue…

Could someone try to reproduce it on a demo instance of HA? Attempted with several iterations of the following config:

      - type: custom:mini-graph-card
        hours_to_show: 1
        points_per_hour: 120
        lower_bound: 0
        upper_bound: 1000
        smoothing: false
        height: 600
        show:
          extrema: true
        entities:
          - entity: sensor.random_0_1000
            name: log(150 - 1000) Simple
            aggregate_func: last
        color_thresholds:
          - value: 0
            color: green
          - value: 200
            color: red
          - value: 1000
            color: blue

ended up with: