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" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	title:{
		text: "Overlapping 1 Number Bubble",
		horizontalAlign: "center"
	},
	toolTip: {
		shared: true
	},

	data: [
		{
			type: "bubble", 
			name: "Company 1",
			showInLegend: true,
			dataPoints:[
				{x:1, y:400, z:400},             
				{x:2, y:130, z:130},
				{x:3, y:170, z:170}, 
			]
		},
		{
			type: "bubble", 
			name: "Company 2",
			showInLegend: true,
			dataPoints:[                  
				{x:1, y:400, z:400},
				{x:2, y:200, z:200}, 
				{x:3, y:300, z:300}, 
			]
		}
	]
});

chart.render();