JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
        <div style="width: 500px; height: 500px">
            <canvas id="canvasLine"></canvas>
        </div>

JavaScript

Chart.defaults.derivedDoughnut = Chart.defaults.doughnut;
var customDoughnut = Chart.controllers.doughnut.extend({
  draw: function(ease) {
    Chart.controllers.doughnut.prototype.draw.apply(this, [ease]);
    var width = this.chart.chart.width,
      height = this.chart.chart.height,
      titleHeight = this.chart.titleBlock.height,
      legendHeight = this.chart.legend.height;
    var total = this.getMeta().total;
    var fontSize = (height / 114).toFixed(2);
    var ctx = this.chart.chart.ctx;
    ctx.font = fontSize + "em Verdana";
    ctx.textBaseline = "middle";
    var text = total,
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = (height+titleHeight+legendHeight)  / 2;

    ctx.fillText(text, textX, textY);
  }
});
Chart.controllers.derivedDoughnut = customDoughnut;

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};
            
            
            // 資料集合，之後只要更新這個就好了。
            var datas=[];
            var ctx = document.getElementById('canvasLine').getContext('2d');
            var lineChart = new Chart(ctx, {
              type: 'derivedDoughnut',
              data: {
                 labels: ['清新','50LAN','COCO','C8763'],
                 datasets: [{
                    backgroundColor: [
                    "#467500",
                    "#FFFF93",
                    "#C7C7E2",
                    "#777777"
                    ],
                    data:[0,0,0,0]
                 }]
              },
              options: {
  							  responsive: true,
  							  legend: {
  							    position: 'top',
  							  },
  							  title: {
  							    display: true,
  							    text: 'Chart.js Doughnut Chart Extended'
  							  },
  							  animation: {
  							    animateScale: true,
  							    animateRotate: true
  							  }
  							}
            });

            //時間格式
            var timeFormat = 'HH:mm:ss';
            
            function appendData()
      ...