Chart where line above/below a certain value has a different color

[Baspa]

I want to build a chart like this:

As you can see it's a stepped line chart which isn't too hard to built. However, I want the color of the lines to change when it gets above a certain value.

Can anyone tell me how to do this or help me in the right direction?

[stockiNail]

@Baspa AFAIK you should use the canvas gradients to reach the goal. Even if the background color can be managed by fill option (https://www.chartjs.org/docs/latest/charts/area.html#filling-modes) and have different fill color with a baseline, this is not possible for border color (color of the line).
The color of the line cannot be changed between the 2 points used to draw the line, even if you use the segment option (https://www.chartjs.org/docs/latest/charts/line.html#segment).

That said, the gradient sounds the right direction. You can managed them by yourself of you can use a specific Chart.js plugin, chartjs-plugin-gradient.

Here an example, close to your use case: https://codepen.io/stockinail/pen/yLrpoRr

[Baspa]

This looks awesome! Thank you very much. ChatGPT definitely couldn't help me out with that :P