Hi, on a project I'm working on which involves plotting 3 line series on one chart, using different colors for each series IN STYLED MODE. We recently tried to add the Boost module to speed things up.
When the chart initially loads, however, none of the colors are applied to the series' lines. They are all drawn as black.
When you zoom in, the redrawn chart DOES apply the colors (!) and when you zoom back out, the entire chart uses the colors correctly.
We are able to "force" this to correct by calling chart.redraw() after the chart is created, but this is inefficient and negates the purpose of using Boost.
Any ideas on what causes this or other work arounds besides calling chart.redraw()?
In examining the SVG created by Highcharts what I've noticed is:
1. When the chart initially loads, ALL THREE series are drawn on the same transparent PNG
2. When zooming in, however, the 3 series are drawn on 3 separate transparent PNGs
3. When zooming back out (or if you call chart.redraw() after creating the chart), the chart is still drawn on 3 separate transparent PNGs
I don't understand why Highcharts renders differently when the chart initially loads (using one PNG) vs when you zoom back out or call chart.redraw() - using 3 PNGs, one for each series, and why the colors seem to only be applied when the series are separated. Is there some way to force Highcharts to render them separately on initial load?
I tried to reproduce a stripped down version in JSfiddle but in the fiddle using Boost caused the lines to be completely invisible (the PNG generated is completely blank). Which is still a problem but not the one we are having.
I have attached 2 screenshots showing the problem.