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-05-14',
  '2017-01-02 00:00:00 GMT-0500 (EST)',
  '2017-01-03 00:00:00 GMT-0500 (EST)',
  '2017-01-04 00:00:00 GMT-0500 (EST)',
  '2017-01-05 00:00:00 GMT-0500 (EST)',
  '2017-01-06 00:00:00 GMT-0500 (EST)',
  '2017-01-07 00:00:00 GMT-0500 (EST)',
  '2017-01-08 00:00:00 GMT-0500 (EST)',
  '2017-01-09 00:00:00 GMT-0500 (EST)',
  '2017-01-10 00:00:00 GMT-0500 (EST)',
  '2017-01-11 00:00:00 GMT-0500 (EST)',
  '2017-01-12 00:00:00 GMT-0500 (EST)',
  '2017-02-01 00:00:00 GMT-0500 (EST)',
  '2017-02-02 00:00:00 GMT-0500 (EST)',
  '2017-02-03 00:00:00 GMT-0500 (EST)',
  '2017-02-04 00:00:00 GMT-0500 (EST)',
  '2017-02-05 00:00:00 GMT-0500 (EST)',
  '2017-02-06 00:00:00 GMT-0500 (EST)',
  '2017-02-07 00:00:00 GMT-0500 (EST)',
  '2017-02-08 00:00:00 GMT-0500 (EST)',
  '2017-02-09 00:00:00 GMT-0500 (EST)',
  '2017-02-10 00:00:00 GMT-0500 (EST)',
  '2017-02-11 00:00:00 GMT-0500 (EST)',
  '2017-02-12 00:00:00 GMT-0500 (EST)',
  '2017-03-01 00:00:00 GMT-0500 (EST)',
  '2017-03-02 00:00:00 GMT-0500 (EST)',
  '2017-03-03 00:00:00 GMT-0500 (EST)',
  '2017-03-04 00:00:00 GMT-0500 (EST)',
  '2017-03-05 00:00:00 GMT-0500 (EST)',
  '2017-03-06 00:00:00 GMT-0500 (EST)',
  '2017-03-07 00:00:00 GMT-0500 (EST)',
  '2017-03-08 00:00:00 GMT-0500 (EST)',
  '2017-03-09 00:00:00 GMT-0500 (EST)',
  '2017-03-10 00:00:00 GMT-0500 (EST)',
  '2017-03-11 00:00:00 GMT-0500 (EST)',
  '2017-03-12 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...