JSFiddle - React, Tailwind, and code Playground

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', 'Device');
    data.addColumn('number', 'Received');
    data.addColumn('number', 'Sent');
    data.addRows([
        ['Device 1', 17848, 14222],
        ['Device 2', 12655, 11898]
    ]);
    
    var formatter = new google.visualization.NumberFormat({pattern: '#,### bytes'});
    formatter.format(data, 1);
    formatter.format(data, 2);
    
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2, {
        type: 'number',
        label: 'Total',
        calc: function (dt, row) {
            var total = dt.getValue(row, 1) + dt.getValue(row, 2);
            return {v: 0, f: formatter.formatValue(total)};
        }
    }]);
    
    var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        isStacked: true,
        focusTarget: 'category',
        legend: {
            position: 'none'
        },
        colors: ['#2513ac', '#b61230'] // colors array contains [received, sent]
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});