JSFiddle - React, Tailwind, and code Playground

by Nguyen Hien

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',
                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);                    ...