JSFiddle - React, Tailwind, and code Playground

by techydude

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

JavaScript

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');

        data.addRows(2);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 1);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 99);

        var options = {
                        width:500,
                        height:500,
                        animation: {duration: 1000, easing: 'out',}
                      };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
       
        chart.draw(data, options);

        function aniChart(d,o){
          for (var i=1; i<100; i++) {
            data.setValue(0, 1, i);
          }
          
          for (var i=99; i>00; i--) {
            data.setValue(1, 1, i);
          }
          setTimeout(function(){
            chart.draw(data, options);
          }, 1000);

        };

        aniChart();

      }