Rendering and moving multiple charts in highcharts

I am working on an exercise for plotting multiple charts on one page. I would like to use a navigator to view this data.

Is there a way that I can navigate 10+ charts more smoothly? The more charts, the more sluggish it becomes.

Also, if the dataset gets too large, as you move the navigator, the data seems to jump out of the plot area rather than slowly moving out of the plot area.

See jsFiddle

function afterSetExtremes(event) {
var globalMax = event.max;
var globalMin = event.min;

for (var i = 0; i < charts.length; i++) {
  charts[i].xAxis[0].setExtremes(globalMin, globalMax, true, false);
}

      

        
        
        
      

    

3 Charts is running smoothly. (Points move from the viewpoint point by point)

The 12 charts seem to fade into panning. The effect I see is that the bursts of data come out of the viewport and instead are translated point by point.

** Click hyperlinks to watch videos **

Any suggestions for this would be appreciated. Thanks to