Customizing Chart using Chart Options - CanvasJS- 0 | JSFiddle Sample Code

Customizing Chart using Chart Options - CanvasJS- 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      
        animationEnabled: true,
        backgroundColor: "transparent",
        title: {
            text: "",
            fontWeight: "bolder",
            fontColor: "red",
            fontFamily: "tahoma",
            fontSize: 20,
            padding: 10
        },
        axisX: {
            title: "Demo Complexity",
            minimum: 1,
            maximum: 10,
            gridThickness: 1,
            interval: 1,
            gridColor: "lightgrey",      
            reversed: true
        },
        axisY: {
            title: "Demo Priority",
            includeZero: true,
            gridThickness: 1,
            interval: 1,
            minimum: 1,
            maximum: 10,
            gridColor: "lightgrey",
        },
        data: [{ //sub
                type: "bubble",
                color: "#00aeff",
                showInLegend: false,
                fillOpacity: 0.6,
                markerBorderColor: "#000000",
                markerBorderThickness: 1,
                toolTipContent: "<b>id:</b> #{id}<br/>{title}<br/									><b>Total:</b> {z}",
                dataPoints: [{
                        "x": 1,
                        "y": 0,
                        "z": 0,
                        "id": "",
                        "title": ""
                    }, {
                        "x": 2,
                        "y": 0,
                        "z": 0,
                        "id": "",
                        "title": ""
                    }, {
                        "x": 3,
                        "y": 1,
                        "z": 273,
                        "id": "00021",
                        "title": "Demo-1"
                    }, {
                        "x": 4,
                        "y": 1,
                        "z": 991,
                        "id": "00007",
                        "title": "Demo-2"
                    },...