JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>

<canvas id="Chart" width="500" height="500"></canvas>

JavaScript

var DEFAULT_DATASET_SIZE = 7;

        var addedCount = 0;

        var randomScalingFactor = function() {
            return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
        };
        var randomColorFactor = function() {
            return Math.round(Math.random() * 255);
        };
        var randomColor = function() {
            return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
        };

        var bubbleChartData = {
            animation: {
                duration: 10000
            },
            datasets: [{
                label: "My First dataset",
                backgroundColor: randomColor(),
                data: [
                {
                    x: 10,
                    y: 0,
                    r: Math.abs(randomScalingFactor()) / 5,
                }, {
                    x: 20,
                    y: 0,
                    r: Math.abs(randomScalingFactor()) / 5,
                }, {
                    x: 30,
                    y: 0,
                    r: Math.abs(randomScalingFactor()) / 5,
                }, {
                    x: 40,
                    y: 0,
                    r: Math.abs(randomScalingFactor()) / 5,
                }, {
                    x: 50,
                    y: 0,
                    r: Math.abs(randomScalingFactor()) / 5,
                }, {
                    x: 60,
                    y: 0,
                    r: Math.abs(randomScalingFactor()) / 5,
                }, {
                    x: 70,
                    y: 0,
                    r: 30,
                }]
            }]
        };

var ctx = document.getElementById('Chart').getContext('2d');
var chart = new Chart(ctx, {
	type: 'bubble',
  data: bubbleChartData
})