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="timeline1" style="height: 190px;"></div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var container = document.getElementById('timeline1');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();

            dataTable.addColumn({
                type: 'string',
                id: 'Company'
            });
            dataTable.addColumn({
                type: 'date',
                id: 'Start'
            });
            dataTable.addColumn({
                type: 'date',
                id: 'End'
            });
            dataTable.addRows([
                ['Acme inc', new Date(1989, 3, 30), new Date(1997, 2, 4)],
                ['Halo Corporation', new Date(1997, 2, 4), new Date(2001, 2, 4)],
                ['Wayne Enterprises', new Date(2001, 0, 4), new Date(2019, 2, 4)]
            ]);

            var options = {
                timeline: {
                    showRowLabels: true,
                    rowLabelStyle: {
                        fontName: '"Work Sans",sans-serif',
                        fontSize: 13,
                        color: '#212529'
                    },
                    barLabelStyle: {
                        fontName: '"Work Sans",sans-serif',
                        fontSize: 13,
                        color: '#212529'
                    },

                }
            }

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

</script>