JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer">
<div  class="widgetContainer" style="height: 360px; width: 100%;"></div>
</div>
<div id="barchartContainer">
<div  class="widgetContainer" style="height: 360px; width: 100%;"></div>
</div>

JavaScript

function generateUuid() {
        var d = new Date().getTime();
        // if ( window && window.performance && typeof window.performance.now === "function") {
        //     d += performance.now(); //use high-precision timer if available
        // }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    };
console.log(generateUuid)
var container = document.getElementsByClassName('widgetContainer');

var chart = new CanvasJS.Chart(container[1],
{        
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
});

chart.render();

var container = document.getElementsByClassName('widgetContainer');

var chart1 = new CanvasJS.Chart(container[0],
{        
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
});

chart1.render();