JSFiddle - React, Tailwind, and code Playground

by oktaviardi pratama

HTML

<link rel="stylesheet" type="text/css" href="https://rawgit.com/notryanb/highcharts_date_range_grouping/config-date-formats/dist/highcharts_date_range_grouping.css"> 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.rawgit.com/notryanb/highcharts_date_range_grouping/config-date-formats/dist/highcharts_date_range_grouping.min.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var categories = [
	'2019-07-03 00:00:00 GMT-0500 (EST)',
  '2019-08-02 00:00:00 GMT-0500 (EST)',
  '2019-010-01 00:00:00 GMT-0500 (EST)'
  ].map(function(date) {
    let formatOptions = { month: '2-digit', day: '2-digit', year: 'numeric' };
    return new Date(date).toLocaleDateString(undefined, formatOptions); 
  });

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  dateRangeGrouping: {
  	dayFormat: { month: 'numeric', day: 'numeric', year: 'numeric' },                               weekFormat: { month: 'numeric', day: 'numeric', year: 'numeric' },                               monthFormat: { month: 'numeric', year: 'numeric'  }   
  },
  title: {
    text: 'Average Temperature Date'
  },
  xAxis: {
    categories: categories
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  plotOptions: {
    line: {
      dataLabels: {
        enabled: true
      },
      enableMouseTracking: false
    }
  },
  series: [{
    name: 'City A',
    data: [
      7.0, 6.0, 9.0
    ]
  }, {
    name: 'City B',
    data: [
      3.0, 4.0, 5.0
    ]
  }]
});