JSFiddle - React, Tailwind, and code Playground

by Edi Carlos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

JavaScript

var data = {
  labels: ['0', '', '', '3', '', '', '6', '', '', '9', '', '', '12', '', '', '15', '', '', '18', '', '', '21', '', ''],
  datasets: [{
    label: 'Whatever',
    data: [287.7695588, 287.7695591, 287.7695588, 518.402393, 349.3577694, 985.989506, 1068.015602, 1630.221974, 1616.020565, 1583.739695, 1593.674063, 1543.705784, 1634.344849, 1671.942706, 1740.257558, 1835.411412, 1655.565019, 1345.900945, 1286.365589, 1156.972826, 1131.793079, 676.5477124, 730.9662211, 623.7522991],
    backgroundColor: '#a2c7db'
  }]
}

var myChart = document.getElementById("myChart");

new Chart(myChart, {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        barPercentage: 1.0,
        categoryPercentage: 1.0
        /* ,
                        gridLines: {
                            display: false
                        } */
      }]
    }
  }
});