JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#chart_div {
    float: left;
}
#legend {
    margin: 30px 0 0 0;
    float: left;
    list-style: none;
}
div.legendMarker {
    height: 1em;
    width: 1em;
    display: inline-block;
    margin: 0 5px 0 0;
}

JavaScript

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

function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onions', 5],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 6],
        ['Sausage', 3],
        ['Peppers', 5],
        ['Tomatoes', 2],
        ['Meatballs', 4],
        ['Extra Cheese', 3]
    ]);

    var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#aaaa11","#22aa99","#994499"];
    
    var legend = document.getElementById('legend');
    var lis = [];
    
    var total = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        // increment the total
        total += data.getValue(i, 1);
        
        // get the data
        var label = data.getValue(i, 0);
        var value = data.getValue(i, 1);
        var percent = Math.ceil(1000 * value / total) / 10;
        
        // create the legend entry
        lis[i] = document.createElement('li');
        lis[i].id = 'legend_' + data.getValue(i, 0);
        lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';"></div>' + label + ': ' + value + ' (' + percent + '%)</span>';
        
        // append to the legend list
        legend.appendChild(lis[i]);
    }
    
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {
        title: 'How Much Pizza I Ate Last Night',
        width: 300,
        height: 300,
        colors: colors,
        legend: {
            position: 'none'
        }
    });
}