JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

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

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

JavaScript

$(function() {
  $('#container').highcharts({
    global: {
      useUTC: false
    },
    chart: {
      zoomType: 'x',
      type: 'area',
      plotBackgroundColor: '#fff',
      backgroundColor: 'transparent',
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'X Axis and value not match',
      align: 'left',
      margin: 30,
      style: {
        fontFamily: 'VegurRegular',
        fontSize: '21px'
      }
    },
    subtitle: {
      text: 'Date Time',
      align: 'left',
      x: 20,
      style: {
        color: '#282828',
        fontFamily: 'VegurRegular'
      }
    },
    xAxis: {
      title: {
        text: ''
      },
      type: 'datetime',
      tickPositioner: function() {
        return this.series[0].xData;
      },
      labels: {
        formatter: function() {
          var myDate = new Date(this.value);
          var newDateMs = Date.UTC(myDate.getUTCFullYear(), myDate.getUTCMonth() - 1, myDate.getUTCDate());
          return Highcharts.dateFormat('%Y-%m-%d', newDateMs);
        },
        style: {
          fontFamily: 'VegurRegular'
        }
      }
    },
    yAxis: {
      opposite: true,
      title: {
        text: ''
      },

      labels: {
        formatter: function() {
          return [this.value];
        },
        style: {
          fontFamily: 'VegurRegular'
        }

      },
    },
    tooltip: {
      shared: true,
      formatter: function() {
        var myDate = new Date(this.x);
        var newDateMs = Date.UTC(myDate.getUTCFullYear(), myDate.getUTCMonth() - 1, myDate.getUTCDate());
        return Highcharts.dateFormat('%Y-%m-%d', newDateMs);

      },
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      area: {
        fillColor: {
          linearGradient: [0, 0, 0, 300],
          stops: [
            [0, '#5cc2d6'],
            [1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
          ]
        },
        lineWidth: 1,
        marker: {
         ...