JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
	<script type="text/javascript">
		function adder() {
			let div;
			window.onload = function() {
				CanvasJS.addColorSet("LabelColor",
					[ //colorSet Array

						"#223977",
					]);
				var chart = new CanvasJS.Chart("chartContainer", {
					colorSet: "LabelColor",
					backgroundColor: "#ced8e5",
					axisX: {
						interval: 1,
					},
					title: {
						text: "My First Chart in CanvasJS"
					},
					toolTip: {
						content: "{p}%"
					},
					data: [{
						// Change type to "doughnut", "line", "splineArea", etc.
						type: "column",
						indexLabel: "{y}",
						dataPoints: [{
								y: 10,
								color: "red"
							},
							{
								y: 15,
								p: 5
							}
						]
					}]
				});
				chart.render();
			}
			div = document.createElement('div');
			div.setAttribute('id', 'chartContainer');
      div.style.width = '100%';
			div.style.height = '300px';
			document.getElementById('toAdd').appendChild(div);
		}
	</script>
</head>

<body>
	<div id="toAdd"><button onclick="adder()">add chart</button></div>
</body>