JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button onClick="clearAndAddNewDataSets()">Add two datasets</button>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

function clearAndAddNewDataSets() {
  myChart.config.data.datasets = [];
  myChart.config.data.labels = [];

  var labels = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5', 'Label6', 'Label8', 'Label8'];
  var data = [
    [234, 234, 5, 23, 34, 234, 234, 234],
    [22, 1, 123, 14, 2]
  ]

  var colors = ['Red', 'Green'];

  myChart.config.data.labels = labels;

  for (i = 0; i < data.length; i++) {
			var dataSet = {
    	label: 'testLabel' + i,
      data: data[i],
      backgroundColor: colors[i]
    }
    
    myChart.config.data.datasets.push(dataSet);    
  }
  
  myChart.update();
  
}