Boost module does not render areaspline in canvas

The boost module does not boost areaspline, although it is supporting it internally.

Example: https://jsfiddle.net/7ss4um2q/1/

[Jaibharath]

Is this resolved. I am using the areaspline type with (zones, dash styles)

[Jaibharath]

Please let me know, as I need to show more then 1000 points in areaspline chart. rendering is too slow even after using the boost module. I tried checking with type 'line' with boost module, it worked, but it is not working for areasplin type.

[sebastianbochan]

Hi @Jaibharath,
At this moment areasplines are still not supported, but could you simplify your demo and post here? It will allow me to verify if any workaround or different solution is possible (like dataGrouping, lazy loading etc).

[Jaibharath]

Ok, We are using angular 6 with highcharts, I conffigured the datagrouping with different zones for each point. Once the series of data is ready through the scripting then I configured the config options with type of chart, series and axis, zoom options, We are using the areaspline type relating which related to our design, It worked until like 300 - 400 xaxis label, Once the labels increasing, chart loading taking more memory. Then I tried using the Boost module which did not work. I tried with type 'line' boost module worked. But with line also once I zoomed in chart is not removing after I zoomed out.

[Jaibharath]

Also when trying with spline+boost module not working. with line+boost module. on reset zoom the chart is not hiding. Its showing the dense line chart and also the zoomed chart on reset zoom

[pawelfus]

At this moment, spline-type is not supported (list of supported types is available in our docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module ). If series on reset zoom does not hide, please recreate issue in jsFiddle (without angular). Thanks!

[Jaibharath]

Hi @pawelfus I dont have the jsfiddle, please replace js below code in below jsfiddel link(https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/line/)

function getData(n) {
var dataObj = {};
dataObj.arr = [];
dataObj.zones = [];
    
        var i;
        var a;
       	var b;
        var c;
        var color;
        var spike;
    for (i = 0; i < n; i = i + 1) {
        if (i % 100 === 0) {
            a = 2 * Math.random();
        }
        if (i % 1000 === 0) {
            b = 2 * Math.random();
        }
        if (i % 10000 === 0) {
            c = 2 * Math.random();
        }
        if (i % 50000 === 0) {
            spike = 10;
        } else {
            spike = 0;
        }
        if(spike > 10) {
        	color = 'yellow'
        } else if (spike < 10 && spike >= 8) {
        	color = 'orange';
        } else if (spike < 8 && spike >= 6) {
        	color = 'red';
        } else if (spike < 6 && spike >= 4) {
        	color = 'red';
        } else if (spike < 4 && spike >= 0) {
        	color = 'green';
        }
        
        dataObj.zones.push({
         color: color,
         value: i
        })
        
        dataObj.arr.push([
            i,
            2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
        ]);
    }
    return dataObj;
}
var n = 5000;
   var dataObj = getData(n);
   var data = dataObj.arr;
   var zones = dataObj.zones;


console.time('line');
Highcharts.chart('container', {

    chart: {
        zoomType: 'x',
        panning: true,
        panKey: 'shift'
    },

    boost: {
        useGPUTranslations: true
    },

    title: {
        text: 'Highcharts drawing ' + n + ' points'
    },

    subtitle: {
        text: 'Using the Boost module'
    },

    tooltip: {
        valueDecimals: 2
    },

    series: [{
        data: data,
        lineWidth: 0.5,
        zones: zones
    }]

});
console.timeEnd('line');

[Jaibharath]

After updating the js, Right now in code I kept 5000 points, and tried to zoom in and did reset zoom. I am getting graph as

[Jaibharath]

This is the intial screen after loading. when we zoom, I am able to see two charts as shown above,

[Jaibharath]

Also while using the boost, is there any way not to show the default blue color and give some zones.

[sebastianbochan]

@Jaibharath at this moment zones are not supported by the boost module due to performance reasons.

As a workaround you can create multiple series and declare a color.