JavaScript Bubble Charts & Graphs - 0 | JSFiddle Sample Code

JavaScript Bubble Charts & Graphs - 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<button class="one-year btn btn-xs btn-primary">One Year</button>
<button class="two-year btn btn-xs btn-primary btn-blur">Two Years</button>

JavaScript

window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        title: {
            text: "Fertility Rate vs Life Expectancy in Different Countries - 2015"
        },
        axisX: {
            title: "Life Expectancy (in Years)",
            minimum: 1,
            maximum: 10,
            gridThickness: 1,
            interval: 1,
            gridColor: "lightgrey",
            labelFormatter: function (e) {
                var xLabelFormat = '';
                if (e.value == 10) {
                    xLabelFormat = "Very High ";
                } else if (e.value == 8) {
                    xLabelFormat = "High ";
                } else if (e.value == 6) {
                    xLabelFormat = "Medium ";
                } else if (e.value == 4) {
                    xLabelFormat = "Low ";
                } else if (e.value == 2) {
                    xLabelFormat = "Very Low ";
                }
                return xLabelFormat;
            },
            reversed: true
        },
        axisY: {
            title: "Fertility Rate",
            includeZero: true,
            gridThickness: 1,
            interval: 1,
            minimum: 1,
            maximum: 10,
            gridColor: "lightgrey",
        },
        legend: {
            horizontalAlign: "top",
            verticalAlign: "top",
            cursor: "pointer",
            itemclick: function (e) {
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                e.chart.render();
            }
        },
        data: [{
                type: "bubble",
                color: "#4F81BC",
                showInLegend: false,
                fillOpacity: .6,
                markerBorderColor: "#000000",
                markerBorderThickness: 1,
     ...