JSFiddle - React, Tailwind, and code Playground
by Osvaldo
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['timeline', 'gantt'],
'language': 'es'
});
</script>
<div id="timeline2" style="height: 190px;"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var container2 = document.getElementById('timeline2');
var chart = new google.visualization.Timeline(container2);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Term'
});
dataTable.addColumn({
type: 'string',
id: 'Name'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
dataTable.addRows([
['1', 'Acme', '<div style="margin: 10px;">Acme</div>', new Date(1989, 3, 30), new Date(1997, 2, 4)],
['2', 'Halo Corporation', '<div style="margin: 10px;">Halo<br />Corporation</div>', new Date(1997, 2, 4), new Date(2001, 2, 4)],
['3', 'Wayne Enterprises', '<div style="margin: 10px;">Wayne<br />Enterprises</div>', new Date(2001, 2, 4), new Date(2019, 2, 4)]
]);
var options = {
colors: ['#FFE19F', '#FFC4A7', '#D7D5A1'],
tooltip: {
isHtml: true
},
timeline: {
showRowLabels: false,
showBarLabels: true,
...