JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="200"></canvas>

JavaScript

var ctx = document.getElementById("canvas");
var data = {
    datasets: [{
        label: 'First Dataset',
        data: [{
            x: 20,
            y: 30,
            r: 15
        }, {
            x: 40,
            y: 10,
            r: 10
        }, {
            x: 30,
            y: 20,
            r: 10
        }],
        backgroundColor: "#FF6384",
        hoverBackgroundColor: "#FF6384",
    }]
};

var chart = new Chart(ctx, {
    data: data,
    type: "bubble",
    options: {
        elements: {
            points: {
                borderWidth: 1,
                borderColor: 'rgb(0, 0, 0)'
            }
        },
        onClick: function(e) {
            var element = this.getElementAtEvent(e);

			// If you click on at least 1 element ...
            if (element.length > 0) {
                // Logs it
                console.log(element[0]);
                var datasetLabel = this.config.data.datasets[element[0]._datasetIndex].label;
                var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index];
                console.log(data);
            }
        }
    }
});