Create an interactive bubble chart using CanvasJS library
JavaScript Bubble Charts & Graphs - 0 | JSFiddle Sample Code
HTML
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
axisX: {
includeZero: false, minimum: 1, maximum: 6
},
axisY: {
includeZero: false, minimum: 1, maximum: 6
},
data: [{
type: "bubble",
showInLegend: true,
legendMarkerColor: "grey",
toolTipContent: "{z}",
dataPoints: [
{ x: 0, y: null, z: 0 },
{ x: 3, y: 5, z: 81 },
{ x: 2, y: 5, z: 100 },
{ x: 4, y: 5, z: 94 },
]
}]
});
chart.render();
}