JSFiddle - React, Tailwind, and code Playground

An example of a Google Timeline using the date data type.

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
      <button id="change">Click to change the format</button>
    <div id="chart_div"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);


google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Date');
        data.addColumn('number', 'Temperatures');

        data.addRows([
        [new Date(1485097200000), 22.5],
        [new Date(1485098100000), 23.8],
        [new Date(1485099000000), 24.2],
        ]);


        var options = {
          title: 'Temperature measured every 15 minutes',
          width: 900,
          height: 500,
          hAxis: {
     
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

        var button = document.getElementById('change');

    
    
        button.onclick = function () {

          // If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);
        };
      }