How to create a curve that changes color on a condition

[claudio2169]

Good morning everyone, I create a curve that based on a condition of variabie bool. Update the color.
I pass the data in Json format [timestamp,Speed,Status] [1684340724000,774,1] The curve is created but I have some difficulty changing color on this logic:
Status=1 Color color curve Red
Status=0 Color color Green.
It seems elementary but I've been trying for a few days without result.
Thanks

[dawid.d]

Hello,

Welcome to our forum and thanks for contacting us with your question!

Could you send me a demo (e.g. in jsfiddle) of what you have achieved so far, on the basis of which I could point you to a solution? It's hard for me to guide you based on the short description, e.g. the curve can be drawn in many ways.

I'm waiting for your reply
Thanks!

[claudio2169]

The passed array has three vectors [timestamp,Speed,Status] Status=0 dot color is red , Status=1 green

https://jsfiddle.net/cjrfk9nv/

[dawid.d]

Hello,

Thanks for the demo!

The color option takes a string, you can't put a callback there. If you want to set the color of the point with a custom point property, you can try to handle it after loading the data, using graph events. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/57hc8sbr/

I hope you will find it useful
Regards!

[claudio2169]

Thank you for your answer, it will be very useful for other developments. in this case I meant to change the color of the curve . The curve of the transmit the trend over time and at that point the state as it is.

[dawid.d]

Hi,

To color the line you can use the zones option. Because of the use of the status parameter, it needs to be parsed to zones somehow. You can find an example in the demo below.

Demo: https://jsfiddle.net/BlackLabel/h12j0Lqa/
API: https://api.highcharts.com/highcharts/series.line.zones

Kind regards!

[claudio2169]

This solution is fine I tried it in my page that extracts an array with 15000 matrices with values ​​(x,y,z) the problem is that it takes 25-30 seconds to render the graph. But often all the well-known browsers crash!
Without line color change function it takes 300ms.

[dawid.d]

Hello,

That's because the above algorithm is an example of how you can parse the custom data array's 3rd field into zones. It is not optimized as this is an example already beyond the scope of Highcharts functionality. Ideally, your line color data should be grouped in a way that doesn't require creating a huge array of zones.

Demo: https://jsfiddle.net/BlackLabel/m16Lstqv/

If it's not possible, it would be better to create separate two series with two different colors instead of using zones.

If I may clarify any issues/matters I am available at your convenience.
Best regards