JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>
<button id="btn_init">init</button>
<button id="btn_change">change</button>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

console.clear();

var chart;
var dps = [
				{ label: "banana", y: 18 },
				{ label: "orange", y: 29 },
				{ label: "apple",  y: 40 },                                    
				{ label: "mango",  y: 34 },
				{ label: "grape",  y: 24 }
			];
            
$('#btn_change').on('click', function() {
	for (var i = 0; i < 5; ++i) {
        dps[i].y = Math.floor((Math.random() * 40) + 1);
    }
    chart.render();
});

$('#btn_init').on('click', function() {
chart = new CanvasJS.Chart("chartContainer",
	{
		animationEnabled: true,
		title:{
			text: "Chart with Labels on X Axis"
		},
		data: [
		{
			type: "column", //change type to bar, line, area, pie, etc
			dataPoints: dps
		}
		]
		});

	chart.render();
});