JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<div>


<canvas id="chartBox" height="50px"></canvas>
</div>

JavaScript

$(document).ready(function() {

   new Chart(document.getElementById("chartBox"), {
      type: 'line',
      data: {
         datasets: [{
            /*showLine: false,*/
            data: [12, 19, 3, 2, 5, 7, 1, 6, 8, 20],
            label: "",
            borderWidth: 2,
            borderColor: "#3e95cd",
            fill: false,
            pointRadius: 0
         }]
      },
      options: {
         
         scales: {
            yAxes: [{
            	display: false
            }],
            xAxes: [{
               type: 'time',
               gridLines: {
                 display:false
            	 },
               time: {
                  parser: 'YYYY-MM-DD',
                  unit: 'day',
                   displayFormats: {
                        day: 'MMM DD'
                    },
                  min: '2019-10-01',
                  max: '2019-12-16'
               },
               ticks: {
                  /*display: false,*/
                  source: 'data'
               }
            }]
         },
         legend: {
            display: false
         },
         animation: {
            duration: 0,
         },
         hover: {
            animationDuration: 0,
         },
         responsiveAnimationDuration: 0
      },
      plugins: [{
      
         beforeInit: function(chart) {
         
            var time = chart.options.scales.xAxes[0].time, 
               timeDiff = moment(time.max).diff(moment(time.min), 'd'); 
            //for (i = 0; i <= timeDiff; i++) {
               var _label = moment(time.min).add(0, 'd').format('YYYY-MM-DD');
               chart.data.labels.push(_label);
               _label = moment(time.min).add(3, 'd').format('YYYY-MM-DD');
               chart.data.labels.push(_label);
               _label = moment(time.min).add(7, 'd').format('YYYY-MM-DD');
               chart.data.labels.push(_label);
               _label = moment(time.min).add(14, 'd').format('YYYY-MM-DD');
              ...