Mini-graph-card: Lines not colored according color_thresholds

Configuration Frontend
1

Hi,

I am using mini-graph-card (v.0.11.0) on Home Assistant 2023.3.4.

I want to display two temperature graphs side by side, with the color of the graph line corresponding to the severity (green, orange and red).
But, I do get a black line, and only the datapoints (visible on mouse hover) are the desired colors.
What am I doing wrong?

type: horizontal-stack
cards:
  - type: custom:mini-graph-card
    name: Switch
    entities:
      - sensor.temperature_switch
    line_width: 8
    font_size: 75
    color_thresholds:
      - value: 0
        color: Green
      - value: 96
        color: Orange
      - value: 100
        color: Red
  - type: custom:mini-graph-card
    name: UDM Pro
    entities:
      - sensor.udm_pro_cpu_temperature
    line_width: 8
    font_size: 75
    color_thresholds:
      - value: 0
        color: Green
      - value: 96
        color: Orange
      - value: 100
        color: Red

mini-graph

2

I am having the same problem. Code:

type: custom:mini-graph-card
name: Ionizing Radiation
icon: mdi:radioactive
hours_to_show: 24
hour24: true
points_per_hour: 6
line_width: 1
entities:
  - entity: sensor.ionizing_radiation_rate
    name: µSv/h
    units: µSv/h
    show_state: true
    show_line: true
    show_fill: false
    show_points: true
    show_extrema: true
    show_average: true
    state_adaptive-color: true
    color_thresholds:
      - value: 0
        color: '#008000'
      - value: 0.3
        color: '#FFFF00'
      - value: 1
        color: '#FF0000'

In my case the line is orange and does not change color.

3

This code is wrong since “color_thresholds” is not a per-entity option.

Typo here.

Typo here.

I strongly suggest to ask similar questions in the already present dedicated mini-graph-card thread instead of creating new threads; you will get answers faster & solutions will not be scattered among many threads.

4

Use correct names for colors.

5

Thanks, that was it.

6

I corrected the state adaptive typo but I think that µSv/h is the correct abbreviation for micro Sieverts per hour. I moved color thresholds but still get odd results. This code

type: custom:mini-graph-card
name: Ionizing Radiation
icon: mdi:radioactive
hours_to_show: 24
hour24: true
points_per_hour: 6
line_width: 1
color_thresholds:
  - value: 0
    color: Green
  - value: 0.35
    color: Orange
  - value: 1.0
    color: Red
color_thresholds_transition: hard
entities:
  - entity: sensor.ionizing_radiation_rate
    name: µSv/h
    units: µSv/h
    show_state: true
    show_line: true
    show_fill: false
    show_points: true
    show_extrema: true
    show_average: true
    state_adaptive_color: true

using a current value of .26 and high/low values of .33 and .25 shows a green state but a black line. If I change the second threshold value from .35 to .28 (or any value between .33 and .26) then I get a green line with orange peaks. In other words, it seems to work properly only when the second threshold is within established values.

7

Increasing the line width makes it appear more green. guess I need to use a brighter color. I will move to an established discussion as you suggested. Thanks for help.

8

I meant a typo in “units” - should be “unit”.

Same error as for another person above - “Green” is not a correct name.
Should be:

  - value: 0
    color: Green
  - value: 0
    color: '#00ff00'
  - value: 0
    color: "#00ff00"

Sure!

9

The problem I am having seems like it belongs here,

There is smoothing in the color and when I set the color 0 to be blue I do see that there is some blue but not at 0, I had the background hidden at the beginning (so just teh line) and it was really confusing cause only the dots would appear in the correct color (like how it looked in @Thomas01’s post).

The fix for this smoothing (wich I think is done very badly cause the smoothing happens BEFORE the first value that is added) is adding this line to your yaml:

color_thresholds_transition: hard

If someone knows how to properly do the smoothing that would be really nice!
Hope this helps someone and have a nice day!

image
image986×477 24.1 KB

10

The black line appears when values are configured in the color_thresholds field that are outside of the values present in the current graph.
To avoid this problem set the lower_bound and the upper_bound values.

11

@GabrieleCarabella Can you share an example? Do you set the upper and lower bound in the colour_threshold object?