JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

HTML

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

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

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

const chart = Highcharts.chart('container', {
  title: {
    text: 'Monthly Average Temperature',
    x: -20 //center
  },
  subtitle: {
    text: 'Source: WorldClimate.com',
    x: -20
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    valueSuffix: '°C'
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    borderWidth: 0,
    showInLegend: false
  },
  series: [{
    marker: {
      fillColor: 'transparent',
      lineColor: Highcharts.getOptions().colors[0]
    },
    data: [...Array(12)]
  }, {
    marker: {
      fillColor: 'transparent'
    },
    data: [...Array(12)].map(Math.random)
  }, {

    data: [...Array(12)].map(Math.random)
  }, {
    lineColor: 'red',
    data: [...Array(12)].map(Math.random)
  }]
})

/* // Update series
setInterval(() => {
  const len = chart.series[1].data.length
  chart.series[0].update({
    marker: {
      fillColor: 'transparent',
      lineColor: Highcharts.getOptions().colors[0]
    },
    data: [...Array(len)].map(Math.random)
  })
}, 1000) */

/* // Add point
setInterval(() => {
  chart.series[1].addPoint(Math.random())
}, 1000) */