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="PieChart" style="height: 300px; width: 500px; position: relative;"></div>
<button class="change1">Start Updates</button><button class="change2">Start Updates</button>
<table id="TableID">
   
        <tr>
            <td>9</td>  <td>8</td>  <td>7</td>  <td>6</td>  <td>5</td>
        </tr>
</table>
<div id="chart1"></div>

JavaScript

$(document).ready(function(){
  var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
  var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
   
  var plot3 = $.jqplot('chart1', [s1, s2], {
    seriesDefaults: {
      // make this a donut chart.
      renderer:$.jqplot.DonutRenderer,
      rendererOptions:{
        // Donut's can be cut into slices like pies.
        sliceMargin: 3,
        // Pies and donuts can start at any arbitrary angle.
        startAngle: -90,
        showDataLabels: true,
        // By default, data labels show the percentage of the donut/pie.
        // You can show the data 'value' or data 'label' instead.
        dataLabels: 'value'
      }
    }
  });
});