JSFiddle - React, Tailwind, and code Playground

by Aashish Manandhar

HTML

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

CSS

.Batman {
 margin: 20px;
 
}

JavaScript

function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['Name', 'Category', 'Value'],
        ['Foo', 'Bat', 9],
        ['Bar', 'Cad', 4],
        ['Baz', 'Qud', 7]
    ]);

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            height: 300,
            width: 400,
            // tell the chart to use HTML tooltips
            tooltip: {
                isHtml: true
            }
        },
        view: {
            columns: [0, 2, {
                // create a custom tooltip column
                type: 'string',
                role: 'tooltip',
                properties: {
                    html: true
                },
                calc: function (dt, row) {
                    var tooltip = `<div class="Batman">
<div><h3>August 1- August 8</h3>
<h6>workstream.cloudfactory.com</h6>
<div>${dt.getValue(row,1)}</div></div>
										</div>`;
                    return tooltip;
                }
            }]
        }
    });
    chart.draw();
}
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);