I'm using Highcharts.js with react (using chrome to test) and it works really well with single color graphs. However I need to color an area graph or multiple line graphs according to point.y value and a condition, and it's causing performance problems.
I am currently painting the graph red when the condition is true, and using the default color when it's false. I do this by creating zones that end when the condition stops or starts being true.
The problem is when there are hundreds of zones and thousands of data points the page performance takes a big hit, and stays choppy for as long as the chart is rendered.
When I analyzed what's wrong in Chrome I found that Composite Layers is taking a huge chunk of time.
I've tried using turboThreshold and it didn't do enough. Zones are not implemented in boost module. Is there any way to increase performance with thousands of points and hundreds of zones?
I think in your case a good solution would be to use 'Multicolor series' plugin instead of zones: http://blacklabel.github.io/multicolor_series/