Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<script src="
http://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="counter">1</div>
<div id="charts"></div>

CSS

.container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 10px auto;
}

#charts {
  overflow: auto;
  height: 1000px;
}

body {
  overflow: hidden;
}

JavaScript

var start = new Date();
var chartsAmount = 50;

for (var i = 0; i < chartsAmount; i++) {
	$('#charts').append('<div class="container" id="container' + i +'"></div>');
}

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);
});

function renderChart(i) {
  if($(`#container${i}`).children().length > 0) {
  	return;
  }
  $('#container' + i).highcharts({
  "chart": {
    "type": "column",
    "zoomType": "",
    "panning": true
  },
  "legend": {
    "enabled": false
  },
  "navigator": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true,
        "padding": 2,
        "borderRadius": 2,
        "style": {
          "fontSize": "12px",
          "textShadow": "0px 0px 3px #fff, 0px 0px 8px #fff"
        }
      },
      "connectNulls": true,
      "turboThreshold": 1000000,
      "events": {},
      "lineWidth": 4,
      "borderWidth": 0.5
    },
    "line": {
      "lineWidth": 3
    },
    "column": {
      "stacking": "normal",
      "groupPadding": 0.01
    }
  },
  "rangeSelector": {
    "enabled": false,
    "inputEnabled": false
  },
  "scrollbar": {
    "enabled": false
  },
  "series": [
    {
      "data": [
        {
          "x": 3,
          "y": 3855956
        },
        {
          "x": 7,
          "y": 13559224
        },
        {
          "x": 17,
          "y": 4032715
        },
        {
          "x": 18,
          "y": 3044791
        },
        {
          "x": 25,
          "y": 1194240
        },
        {
          "x": 29,
          "y": 875359
        },
        {
          "x": 34,
          "y": 6177128
        },
        {
          "x": 35,
          "y": 3144330
        },
        {
      ...