JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@1.1.3/dist/chartjs-plugin-dragdata.min.js"></script>
<canvas id="chartJSContainer" style="height: 400px; width: 600px; display: block;" width="600" height="400"></canvas>

JavaScript

var myChart;
var ctx = document.getElementById('chartJSContainer').getContext('2d');

myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					datasets: [
            						{
							label: 'Bubble DataSet',
							data: [
                {x: 3,y: 11,r: 30},{x: 14,y: 3,r: 15},{x: 12,y: 32,r: 45},
                {x: 11,y: 21,r: 60},{x: 20,y: 5,r: 33},{x: 21,y: 16,r: 70}
              ],
              xAxisID: "x-axis-1",
							type: 'bubble',
							dragData: true,
							dragX: true,
							backgroundColor: "rgba(64, 166, 234, 0.2)",
							borderColor: "rgba(64, 175, 234,1)",
						},
						{
							type: 'bar',
							label: 'Bar DataSet',
							data: [50,0,0,0,0,50],
              id: "x-axis-0",
							dragData: false,
							backgroundColor: [
								'rgba(54, 162, 235, 0.2)',
								'rgba(255, 159, 64, 0.2)'
							],
							borderColor: "rgb(128,128,128)",
							borderWidth: 1,
							barPercentage: 0.7
						},
						{
							
							label: 'Line Dataset',
							data: [
                {x: 0, y: 0}, {x: 10, y: 10},{x: 20, y: 20},
                {x: 30, y: 30},{x: 40, y: 40},{x: 50, y: 50},
              ],
							type: 'scatter',
              showLine: true,
							dragData: false,
              id: "x-axis-0",
							borderWidth: 1,        
							pointRadius: 25,
							pointHoverRadius: 25,
							pointBackgroundColor: "#fff",
							backgroundColor:"transparent",
							borderColor:"#000",
						}
					],
					labels: [0, 10, 20, 30, 40, 50]
				},
				options: {
					legend: { display: true },
					animation: false,
					dragData: true,
					title: {
						display: false,
						text: 'Bubble Chart for Modern and Non-Modern'
					},
					scales: {
						xAxes: [{
              id: "x-axis-0",
							scaleLabel: {
								display: true
							},
							gridLines: {
								offsetGridLines: true
							}
						},{
              id: "x-axis-1",
              type: "linear",
              ticks: {
                min: -5,
                max:...