Highcharts Demo

author(s): Torstein Hønsi

by vasagi

HTML

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

<div id="container"></div>

JavaScript

const data1 = [];
const data2 = [];
const data3 = [];
for (let i = 0; i < 10000; i++) {
  const time = (new Date()).getTime() + i * 1000;
  data1.push([Math.random() * 10, Math.random() * 10]);
  data2.push([Math.random() * 10, Math.random() * 100]);
  data3.push([Math.random() * 10, Math.random() * 10]);
}
Highcharts.theme = {
  yAxis: {
    labels: {
      style: {
        fontSize: '14px'
      }
    },
    title: {
      enabled: false
    }
  }
};
Highcharts.setOptions(Highcharts.theme);
Highcharts.chart('container', {
    "chart": {
        "type": "",
        "styledMode": false,
        "id": "bc148342-c7a0-4616-a13d-8c84f06d6f6a",
        "width": null,
        "height": 250,
        "marginTop": 30,
        "className": "vertical-chart line-chart points-no-fill highcharts-multiple-series",
        "zooming": {
            "mouseWheel": {
                "enabled": false
            }
        },
        "events": {},
        "resetZoomButton": {
            "position": {
                "x": 100,
                "y": 10
            },
            "relativeTo": "chart"
        },
        "zoomType": "x",
        "alignTicks": false
    },
    "boost": {
        "enable": true,
        "useGPUTranslations": false
    },
    "exporting": {
        "enabled": false,
        "fallbackToExportServer": false
    },
    "title": {
        "text": ""
    },
    "categories": [
        {}
    ],
    "xAxis": {
        "gridLineWidth": 0,
        "gridLineDashStyle": "Solid",
        "gridLineColor": "#eeeeee",
        "className": "gridLineStyledMode",
        "type": "datetime",
        "crosshair": true,
        "min": 1729209600000,
        "minTickInterval": 60000,
        "minRange": 300000,
        "categories": false,
        "title": {
            "text": "",
            "y": 5
        },
        "labels": {
            "style": "",
            "useHTML": false,
            "rotation": 0,
            "y": 25
        },
        "scrollbar": {
           ...