JSFiddle - React, Tailwind, and code Playground

by cs3vigny

HTML

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

<div id="chart_div2"></div>

CSS

#chart_div2 {
    position: relative;
    top: -500px;
    left: 0px;
}

JavaScript

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

function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['blank', 165],
       ['', 35]
    ]);

      var data2 = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['blank', 134],
       ['', 66]
    ]);  
    
    var options1 = {
        legend: 'none',
        height: 600,
        backgroundColor: 'transparent',
        chartArea: {
            width: "100%"
        },
        pieHole: 0.7,
        colors:['#33B5E5', '#ffffff'],
        tooltip: {
            trigger: 'none'
        }
    };

        var options2 = {
        legend: 'none',
        height: 400,
        backgroundColor: 'transparent',
        chartArea: {
            width: "100%"
        },
        pieHole: 0.6,
        colors:['#3300ff', '#ffffff'],
        tooltip: {
            trigger: 'none'
        }
    };
    
    var chart1 = new google.visualization.PieChart(document.getElementById('chart_div1'));
    chart1.draw(data1, options1);
    
    var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
    chart2.draw(data2, options2);
}