JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
<br />
<br />
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to fill area between lines</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

JavaScript

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['X', 'Y1', 'Y2'],
        [0, 6, 12],
        [1, 4, 9],
        [2, 8, 14],
        [3, 3, 10],
        [4, 5, 11],
        [5, 2, 7],
        [6, 8, 9],
        [7, 6, 7]
    ]);
    
    var view = new google.visualization.DataView(data);
    // repeat column 1 twice, then calculate the value of column 2 (will be column 3 in the end)
    view.setColumns([0, 1, 1, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function (dt, row) {
            // return the difference between column 2 and 1 as the value
            // and the formatted value of 2 as the formatted value
            return {
                v: dt.getValue(row, 2) - dt.getValue(row, 1),
                f: dt.getFormattedValue(row, 2)
            };
        }
    }]);
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        isStacked: true,
        series: {
            0: {
                type: 'line'
            },
            1: {
                type: 'area',
                color: 'transparent',
                visibleInLegend: false
            },
            2: {
                type: 'area'
            }
        }
    });
}