Highcharts Isomorphic rendering / web-workers

Question

We have an application which renders ~50 (high)charts simultaneously on a dashboard. The thing is the browser freezes when the charts are getting rendered. (I tried using boost and virtual scroll). What makes it worse is that our users generally have datalabels on.

A fiddle with experiments: http://jsfiddle.net/z9msdftt/1/

var to;
$('#charts').scroll((e) => {
    clearTimeout(to);
        to = setTimeout(() => {
        var offset = Math.floor($('#charts').scrollTop() / 400);
        var start = new Date();
        [...Array(5)].forEach((_, i) => {
            renderChart(offset + i);
        });
        var end = new Date();
        $('#counter').html('Time rendering: ' + (end - start) + 'ms');
    }, 50);
});

Is there a way I can speed this up maybe by:

1. Doing an initial server rendering of the SVG and then handle further interactions on the client side (isomorphic render)

Or

2. Using webworkers to do calculations parallely and then rendering the charts.

Any help, would be greatly appreciated.

Answer 1

You can try Highcharts boost.js to speed up rendering process.

This speed problem is general in all SVG based chart libraries. Performance decreases after adding a couple hundreds of points to the chart or adding multiple charts to the same page.

boost.js is using HTML5 canvas technology by drawing the graph on a HTML5 canvas then copying the content of the chart to a SVG.