Chartjs-How to format date string for x axis labels in chartjs?

by

0👍

✅

I’m assuming, you wish to show the x-axis labels as 01 January 2017 not as 01-01-2017 .

If that’s the case then, you need to re-format your date string, which you could accomplish in the following way …

var date_arr = ["01-01-2017", "03-01-2017", "04-02-2017", "09-02-2017", "03-03-2017", "17-03-2017", "23-03-2017", "09-04-2017"];

var labels = formatDate(date_arr);

function formatDate(arr) {
   var new_date = [];
   arr.forEach(function(d) {
      var date = d.split('-')[0].replace(/\d+/, function(e) {
         switch (e) {
            case '01': case '21': case '31':
               return e + 'st';
            case '02': case '22':
               return e + 'nd';
            case '03': case '23':
               return e + 'rd';
            default:
               return e + 'th';
         }
      });
      var month = new Date(d.split('-')[1]).toLocaleString('en-us', {
         month: "long"
      });
      var year = d.split('-')[2];
      new_date.push(date + ' ' + month + ' ' + year);
   });
   return new_date;
}

/*** GENERATE CHART ****/

var aR = null; //store already returned tick
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: "My First dataset",
         backgroundColor: 'rgba(255, 99, 132, 0.5)',
         borderColor: 'rgb(255, 99, 132)',
         data: [12, 16, 10, 11, 9, 15, 13, 16],
         lineTension: 0
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               autoSkip: false,
               callback: function(e) {
                  var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
                  if (tick != aR) {
                     aR = tick;
                     return tick;
                  }
               }
            }
         }],
         yAxes: [{
            ticks: {
               min: 0,
               max: 30
            }
         }]
      }
   }
});
<canvas id="myChart" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

Leave a comment