color thresholds: wrong line color

[nschloe]

I have a mini-graph-card with some color thresholds:

type: custom:mini-graph-card
entities:
  - sensor.bogenhanf_conductivity
align_icon: left
align_state: left
show:
  fill: true
hours_to_show: 336
lower_bound: 0
upper_bound: 2500
color_thresholds:
  - value: 300
    color: '#D0342C'
  - value: 301
    color: '#008000'
  - value: 1000
    color: '#D0342C'
color_thresholds_transition: hard

The dots (shown when hovering over the graph) have the correct color, but the line doesnt:

It doesn't matter if the transition is hard or smooth

[jlsjonas]

Hi,

There seems to be a drift on the linear gradient when setting a higher upper_bound.

If you need the color at a glance I'd recommend to either remove the upper_bound or set show option's points: true

[nschloe]

Observe the red and green area below the graph: They're also incorrectly computed. Perhaps the bug has something to do with that.

[ildar170975]

@nschloe

1. Cannot reproduce your issue.

Code for the 1st card:

type: custom:mini-graph-card
name: 'lower_bound: ~400'
entities:
  - sensor.xiaomi_cg_1_co2
show:
  fill: true
  labels: true
hours_to_show: 48
height: 500
line_width: 2
lower_bound: ~400
upper_bound: 1000
color_thresholds:
  - value: 400
    color: green
  - value: 500
    color: red
  - value: 600
    color: blue
color_thresholds_transition: hard

2. Please post screenshots in a way to make them more visible.

red and green area below the graph

On your screenshots this is rather subtle. Use a default light theme next time. And make it easier for yourself - increase a height, otherwise the area is too narrow to see anything.

Please report can you still see the issue.

[nschloe]

All your transitions are quite sharp. Try it with flatter data near a color threshold.

[ildar170975]

All your transitions are quite sharp.

This is good.

Try it with flatter data near a color threshold.

What can it change?

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.number
  - type: custom:mini-graph-card
    entities:
      - input_number.number
    show:
      fill: true
      labels: true
    hours_to_show: 0.083333
    height: 500
    cache: false
    line_width: 2
    lower_bound: 0
    points_per_hour: 600
    smoothing: false
    color_thresholds:
      - value: 0
        color: green
      - value: 10
        color: red
      - value: 20
        color: blue
    color_thresholds_transition: hard

[nschloe]

This is good.

Well, mine aren't and that causes the problem. If the transition is shallow, colors aren't correctly assigned.

[ildar170975]

What is a “shallow” transition? There are 2 types of transition. If you mean “smooth” - then take MY example, change to “smooth” and please show what is wrong there.

[nschloe]

Sorry, my wording was unclear. In your examples, the graphs "dive" sharply from one area to the next. In my example, the y-value hardly changes. Over the whole x-length of the graph, it creeps down:

From looking at it, it seems that everything is still in the green. That's wrong though! The transition into the "red" color area has already happened, and is revealed when hovering with the mouse pointer over the image to such that the points are highlighted:

I hope this makes things clearer.

[ildar170975]

Already suggested you to make graphs more clear - height, theme. Sorry, can barely see.

[nschloe]

Sorry, can barely see.

Can you see that the graph is completely green in the above chart, and red on the right-hand side in the below graph?

[ildar170975]

Perhaps someone may use a loupe and help you.

[nschloe]

I'm really at a loss tring to explain the issue. Last attempt:

Two pictures of the same data, going from green to red. Top is with mouse hover, so the little data points are visible. They are red; good. Bottom: Just the graph lines. All green; not good.

[ildar170975]

You got an issue which you want to sort out. For this you need to simplify the case - to make it clear. Twice I suggested you how we can simplify it - increase height and make colors clearly visible by using a light default theme. Let’s not spent a lot of time and posts for discussing a necessity of these suggestions; and in the end we might still not be able to solve the issue. But it may help.

[ildar170975]

Also, thresholds were set in a wrong way:

  - value: 300
    color: '#D0342C'

i.e. starting from "300", but actual data may be below 300 which causes inconsistency.

[ildar170975]

No feedback within 3 months, closing