JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>


  <div style="height: 60vh;">
    <canvas id="can" />
  </div>


</body>

JavaScript

var config = {
  type: 'bubble',
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        ticks: {
          /* min: 10,
          max: 10,
          maxTicksLimit: 5 */
          /*callback: function(value, index, values) {
              return 'value is ' + value;
          }*/
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          beginAtZero: true,


        }
      }]
    }
  },
  data: {
    datasets: [{
      label: ['Sales'],
      data: [{
        x: 10,
        y: 10,
        r: 10
      }, {
        x: 10,
        y: 20,
        r: 10
      }, {
        x: 10,
        y: 30,
        r: 10
      }, {
        x: 10,
        y: 40,
        r: 10
      }, {
        x: 10,
        y: 50,
        r: 10
      }, {
        x: 10,
        y: 60,
        r: 10
      }],
      backgroundColor: ["#00AAE7", '#f00']
    }]
  }
};


let cxt = document.getElementById('can').getContext("2d");
let lineChart = new Chart(cxt, config);