JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>

JavaScript

function drawChart() {    
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Highest sales');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', '2nd highest sales');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', '3rd highest sales');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addRows([
        [new Date(2013, 10, 29), 172, 'Product 1', 141, 'Product 2', 93, 'Product 3'],
        [new Date(2013, 10, 30), 167, 'Product 1', 142, 'Product 3', 128, 'Product 4'],
        [new Date(2013, 11, 1), 146, 'Product 2', 137, 'Product 5', 121, 'Product 6']
    ]);
    
    // create a DataView so we can build custom tooltips for each bar
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            return dt.getFormattedValue(row, 0) + '\n' + dt.getValue(row, 2) + ' Sales: ' + dt.getValue(row, 1);
        }
    }, 3, 4, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            return dt.getFormattedValue(row, 0) + '\n' + dt.getValue(row, 4) + ' Sales: ' + dt.getValue(row, 3);
        }
    }, 5, 6, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            return dt.getFormattedValue(row, 0) + '\n' + dt.getValue(row, 6) + ' Sales: ' + dt.getValue(row, 5);
        }
    }]);
    
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        vAxis:  {
            minValue: 0
        }
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});