CODEWITHSUNDEEP
performancehighcharts
Joy
Joy

Reputation: 9550

HighCharts performance degrades dramatically with 'chart' and 'renderer' together

I am trying to get some feelings on HighCharts performance. Compare these two codes:

The timing difference is ~10x, which is quite wired.

I need the chart.tooltip to show tooltips. So I cannot simply use the code A. But why the performance is so different? How to write a better solution?

Upvotes: 3

Views: 389

Answers (1)

Torstein Hønsi
Torstein Hønsi

Reputation: 2197

I've done some digging in Highcharts and it turns out to be the handling of Z indices in the SVGElement.add method that slows it down. The solution is to add your own group, and add all the rectangles to that group. Then the performance is the same whether you add it inside or outside a chart.

    var ren = chart.renderer;        
    var g = ren.g().add();

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

http://jsfiddle.net/highcharts/jxpSk/7/

Upvotes: 4

Related Questions