JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.min.css">
<script src="http://trainingandfitnessblog.com/assets/js/jqplot.donutRenderer.js"></script>
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button class="change1">Start Updates</button>

JavaScript

var storedData = [3, 7];
var newData = [9, 1, 4, 6, 8, 2, 5];

$('.change1').click( function(){
    plot1.replot({data: [newData], resetAxes: true,});
});

  var plot1 = $.jqplot('chart1', [storedData], {seriesDefaults: {
     
      renderer:$.jqplot.DonutRenderer,
     stackSeries : true,
      
      rendererOptions:{
       animation: {
                    show: true
                },
      animate: true, animateReplot: true,
      sliceMargin: 3,
      startAngle: -90,
      showDataLabels: true,
      dataLabels: 'value'
      }
    }
  });