JSFiddle - React, Tailwind, and code Playground

by Kieran Dang

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; margin: 0 auto"></div>

JavaScript

$(function() {
  Highcharts.chart('container', {
    title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
    },
    xAxis: {
      categories: ['1st', '2nd', '3th', '4th', '5th', '6th',
        '7th', '8th'
      ]
    },
    yAxis: {
      title: {
        text: 'Values'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'Original data',
      data: [80, 90, 92, 83, 87, 96, 100, 110]
    }, {
      name: 'Moving average',
      data: [null, 86.25, 88, 89.50, 91.50, 98.25, null, null],
      dashStyle: 'longdash',
      pointPlacement: 0.5,
      color: 'rgba(255, 0, 0, 0.50)'
    }, {
      name: 'Centered/Trend line',
      data: [null, null, 87.125, 88.750, 90.500, 94.875, null, null]
    }]
  });
});