JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

CSS

div.google-visualization-tooltip {
    width: auto;
    height:auto;
    background-color: #ccccff;
    color: #000000;
    text-align: center;
    vertical-align: middle;

}

JavaScript

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

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: 'Row label' });
  dataTable.addColumn({ type: 'string', id: 'Bar Label' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Row 1', 'Baraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', new Date(2016, 7, 1, 0, 30), new Date(2016, 7, 1, 0, 35) ],
    [ 'Row 1', 'Barrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr', new Date(2016, 7, 1, 1, 15), new Date(2016, 7, 1, 1, 45) ],
    [ 'Row 1', 'Barggggggggggggggggggggggggggggggggggggggggggggggggggggggg', new Date(2016, 7, 1, 1, 50), new Date(2016, 7, 1, 2, 15) ]
  ]);

google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        var rectangles = container.getElementsByTagName('rect');
        var adjustY = 25;
        var adjustX = 15;
        for(var i=0; i<2; i++){
            if (rectangles[i].getAttribute('x') !== '0') {
                var barLabel = container.appendChild(document.createElement('span'));
                barLabel.innerHTML = dataTable.getValue(i, 1);
                barLabel.style.color = '#ffffff';
                barLabel.style.position = 'absolute';
                barLabel.style.overflow = 'hidden';
                barLabel.style.pointerEvents = 'none';
                barLabel.style.width = (parseInt(rectangles[i].getAttribute('width') - adjustX)) + 'px';
                barLabel.style.top = (parseInt(rectangles[i].getAttribute('y')) + adjustY) + 'px';
                barLabel.style.left = (parseInt(rectangles[i].getAttribute('x')) + adjustX) + 'px';
            }
        }

    });

  chart.draw(dataTable, {
    timeline: {
    }
  });
}