JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<canvas id="chart" width=512 height=256></canvas>

JavaScript

Chart.defaults.scale.stacked = true;
Chart.defaults.scale.ticks.min = 0;
Chart.defaults.scale.ticks.maxRotation = 0;

new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: {
    datasets: [{
      data: [
        {x: '2018-06-01', y: 100},
        {x: '2018-06-02', y: 100},
        {x: '2018-06-03', y: 100},
        {x: '2018-06-04', y: 100},
        {x: '2018-06-05', y: 100},
        {x: '2018-06-06', y: 100},
        {x: '2018-06-07', y: 100},
        {x: '2018-06-08', y: 100},


      ]
    }]
  },
  options: {
//    tooltips: {
//      callbacks: {
//        title: items =>
//          `Date: ${formatNoTZ(parse(items[0].xLabel), DATE_ONLY)}`,
//      },
//    },
    scales: {
      xAxes: [{
        type: 'time',
        offset: true,
        time: {
          minUnit: 'day',
        },
        gridLines: {
          offsetGridLines: true
        },
        ticks: {
          callback: label => label.toUpperCase(),
        },
      }],
      yAxes: [{
        afterFit(scaleInstance) {
            // set Y axis width to 45 always (to accomodate shortnumber without changing width)
          scaleInstance.width = 45;
        },
        ticks: {
          stepSize: 10,
//          callback: (label, index, labels) => {
//            if (index === 0 || index === labels.length - 1) {
              // only show first and last labels
//              return shortNumber(label);
//            }
//          },
        },
      }],
    },
  }
});