JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value 1 Predicted');
    data.addColumn('number', 'Value 2 Predicted');
    data.addColumn('number', 'Value 1 Actual');
    data.addColumn('number', 'Value 2 Actual');
    data.addRow(['Foo Predicted', 1, 3, null, null]);
    data.addRow(['Foo Actual', null, null, 3, 2]);
    data.addRow(['', null, null, null, null]);
    data.addRow(['Bar Predicted', 5, 1, null, null]);
    data.addRow(['Bar Actual', null, null, 2, 6]);
    data.addRow(['', null, null, null, null]);
    data.addRow(['Baz Predicted', 4, 3, null, null]);
    data.addRow(['Baz Actual', null, null, 1, 5]);

    var geochart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    geochart.draw(data, {
        width: 600,
        height: 400,
        isStacked: true,
        colors: [
            '#FF8080',
            '#8080FF',
            '#FF0000',
            '#0000FF'
        ]
    });
}