JSFiddle - React, Tailwind, and code Playground

by antonis p

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="pieStatus" height="200"></canvas>

JavaScript

var labels1 =  ["Data 1", "Data 2", "Data 3"];
var tempData = {
  labels: labels1,
  datasets: [{
    label: "Status",
    data: [2, 6, 0],
    backgroundColor: ["#339966", "#144FFF", "#006666"]
  }]
};

var ctx = document.getElementById("pieStatus");
var chartInstance = new Chart(ctx, {
  type: 'pie',
  data: tempData,
  options: {
    title: {
      display: true,
      fontsize: 14      
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {   
          var label = data.labels[tooltipItem.index];
          return label + " - " + data.datasets[0].data[tooltipItem.index];
        }
      }      
    }
  }
});

window.setInterval(RefreshData, 1000)

function RefreshData() {
  var newData = [];
  var num = Math.floor(Math.random() * 10);
  for (i = 0; i < 3; i++) {
    newData.push(num + i);
  }
  
  tempData.labels = labels1;
  tempData.datasets[0].data = newData;
  chartInstance.update();
}