JSFiddle - React, Tailwind, and code Playground

An example of a Google Timeline.

by dfederighi

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="timeline" style="height: 180px;"></div>

JavaScript

const formatTooltip = (field) => {
	return '<div style="padding: 10px;">' + field + '</div>';
}

/*
const styles = {
	standard: {
  	color: 'blue',
    'stroke-width': 2,
    'stroke-color': red
  }
};
*/
	
	google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', id: 'Tooltip', role: 'tooltip', 'p': {'html': true} });
        dataTable.addColumn({ type: 'string', role: 'style'});
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, formatTooltip('Washington'), 'color: blue; stroke-width: 2; stroke-color: red', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',  null, formatTooltip('Adams'), 'color: green', new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  null, formatTooltip('Jefferson'), 'color: brown', new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }