JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

HTML

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

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    zoomType: 'xy'
  },
  title: {
        text: 'Timeline with Data Function Bubbles'
  } ,
  xAxis: { 
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true,
    type: 'datetime'
  }, 
  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 100,
    y: 70,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
    borderWidth: 1
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 5,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
    /*   tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.x} cm, {point.y} kg'
      } */
    }
  },
  series: [{
    name: 'DG Operations', 
    data:[
  {
    "x": 1483209000000,
    "y": 8
  },
  {
    "x": 1485887400000,
    "y": 10
  },
  {
    "x": 1488306600000,
    "y": 8
  },
  {
    "x": 1490985000000,
    "y": 9
  },
  {
    "x": 1493577000000,
    "y": 8
  },
  {
    "x": 1496255400000,
    "y": 7
  },
  {
    "x": 1498847400000,
    "y": 8
  },
  {
    "x": 1501525800000,
    "y": 7
  },
  {
    "x": 1504204200000,
    "y": 6
  },
  {
    "x": 1506796200000,
    "y": 8
  },
  {
    "x": 1509474600000,
    "y": 10
  },
  {
    "x": 1512066600000,
    "y": 13
  },
  {
    "x": 1514745000000,
    "y": 6
  },
  {
    "x": 1517423400000,
    "y": 3
  },
  {
    "x": 1519842600000,
    "y": 8
  },
  {
    "x": 1522521000000,
    "y": 3
  },
  {
    "x": 1525113000000,
    "y": 8
  },
  {
    "x": 1527791400000,
    "y": 7
  },
  {
    "x": 1530383400000,
    "y": 8
  },
  {
    "x": 1533061800000,
    "y": 13
  },
  {
    "x": 1535740200000,
    "y": 5
  },
  {
    "x": 1538332200000,
    "y": 8
  }
] 
 ...