Benchmarking HighCharts, D3 and Canvas plotting

Question

We are trying to choose SVG (HighCharts, D3) or Canvas for our application. Plotting efficiency is critical for us. So I did a very simple benchmarking on the rect drawing. Please check:

• HighCharts 1000 rectangles
• D3 1000 rectangles
• Canvas 1000 rectangles

It turns out that highcharts spends around 900ms to plot, D3 spends around 50ms~70ms, while Canvas spends ~1ms to plot (check console.log).

I expected SVG may be slower than Canvas. But I never expect the gap is so big. Even worse, if I change the iteration number to be 10000, Canvas finishes within 10ms, while SVG runs for around 28s!!! Our application would not have so many objects, but this performance is not acceptable if we want to scale up.

Did I do anything wrong? How to write a more efficient code for SVG? The SVG exporting feature is also important for us.

Answer 1

You should compare rendering the same object, not initialize full chart and use renderer. In this scenario you should use this solution:

http://jsfiddle.net/jxpSk/2/

$(function () {

        var startTime = $.now();
        var ren = new Highcharts.Renderer($('#container')[0],600,1000);

        for (var i = 0; i < 1000; i++) {
            ren.rect(i, i, 100, 100, 0).attr({
                fill: '#FF0000'
            }).add();
        }

        var endTime = $.now();
        console.log('Time: ' + (endTime - startTime));
    });

then will be more objective.