JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
<button id="remove">Click</button>

JavaScript

var dataExample = [1, 10, 5, 2, 19, 10];

$(function() {
  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ["GoProject", "ConditionalGo", "Idea", "Closed", "NoGo", "NoGoNow"],
      datasets: [{
        backgroundColor: [
          'rgb(0, 178, 80)',
          'rgb(148, 209, 80)',
          'rgb(222, 131, 12)',
          'rgb(80, 59, 100)',
          'rgb(255, 3, 2)',
          'rgb(254, 194, 0)'
        ],
        data: dataExample,
      }]
    },
    options: {
      legend: {
        position: 'left'
      }
    }
  });

  $("#remove").on('click', function() {
    removeData(chart);
  });
});



function addData(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  chart.update();
}

function removeData(chart) {
  /* chart.data.labels.pop(); */
	dataExample[1] = 100;
  alert(dataExample);
  chart.update();
}