Highcharts Demo

by gwwar

HTML

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

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

CSS

#container {
    min-width: 380;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {

    chart: {
      type   : 'scatter',
      zooming: {
        mouseWheel: {
          enabled: false,
        },
        type: 'xy',
      },
      animation: false,
    },
    plotOptions: {
      series: {
        animation     : false,
        stickyTracking: false,
        states        : {
          inactive: {
            enabled: false,
          },
        },
      },
      scatter: {
        boostThreshold: 100,
      },
    },

    series: [{
      type: 'scatter',
      id  : 'scatter-0',
      name: 'C1*C2',
      data: Array.from({ length: 300 }).map(() => [
        Math.pow(Math.random(), 2) * 300,
        Math.pow(Math.random(), 2) * 300,
      ]),
      keys  : ['x', 'y'],
      marker: {
        symbol: 'circle',
      },
      zIndex: 0,
    },
    {
      type: 'scatter',
      id  : 'scatter-1',
      name: 'C3*C4',
      data: Array.from({ length: 300 }).map(() => [
        Math.pow(Math.random(), 2) * 300,
        Math.pow(Math.random(), 2) * 300,
      ]),
      keys  : ['x', 'y'],
      marker: {
        symbol: 'diamond',
      },
      zIndex: 1,
    },
    {
      type: 'scatter',
      id  : 'scatter-2',
      name: 'C5*C6',
      data: Array.from({ length: 300 }).map(() => [
        Math.pow(Math.random(), 2) * 300,
        Math.pow(Math.random(), 2) * 300,
      ]),
      keys  : ['x', 'y'],
      marker: {
        symbol: 'square',
      },
      zIndex: 2,
    }],

});