JSFiddle - React, Tailwind, and code Playground

by Rikin Patel

HTML

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

JavaScript

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'style'});
    data.addColumn('number', 'Value1');
    data.addColumn({type: 'string', role: 'style'});
    data.addRows([
        ['Foo', 5, 'color: #ac6598; stroke-color:  black; stroke-width: 2', 10, 'color: #ac6598; stroke-color:  black; stroke-width: 2'],
        ['Bar', 7, 'color: #3fb0e9; stroke-color:  black; stroke-width: 2', 14, 'color: #3fb0e9; stroke-color:  black; stroke-width: 2'],
        ['Baz', 3, 'color: #42c698; stroke-color:  black; stroke-width: 2', 6, 'color: #42c698; stroke-color:  black; stroke-width: 2']
    ]);
    
    var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        legend: {
            position: 'none'
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});