ChartJS Bubble Chart

Testing for graph

by Donlee Malacad

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <body>
    <h1>TEST FIGMA COMMENTS!</h1>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <canvas id="bubble-chart" width="800" height="800"></canvas>
      </div>
      <div class="col-md-2"></div>
    </div>
  </body>

</html>

JavaScript

new Chart(document.getElementById("bubble-chart"), {
    type: 'bubble',
    data: {
      datasets: [
        {
          label: ["Food"],
          backgroundColor: "rgba(255,221,50,1)",
          borderColor: "rgba(255,221,50,1)",
          data: [{
            x: 43000,
            y: 1265,
          }]
        }, {
          label: ["Training"],
          backgroundColor: "rgba(60,186,159,1)",
          borderColor: "rgba(60,186,159,1)",
          data: [{
            x: 23000,
            y: 1032,
          }]
        }, {
          label: ["Toilet"],
          backgroundColor: "#000",
          borderColor: "#000",
          data: [{
            x: 33000,
            y: 535,
          }]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'As stated in figma'
      }, scales: {
        yAxes: [{ 
          scaleLabel: {
            display: true,
            labelString: "Web Pages"
          }
        }],
        xAxes: [{ 
          scaleLabel: {
            display: true,
            labelString: "Tweets"
          }
        }]
      }
    }
});