Chartjs-Chart.js show date on X axis ticks, but only when day is different from previous tick

by

0👍

Use ticks.callback as shown here.

For example:

      var last_date = ''; // global var outside config

      // Within config.scales.x.ticks add this callback:

      callback: function(val, index, ticks) {
        // Get value of tick (already formatted by time axis option)
        tick = this.getLabelForValue(val);

        // Extract parts of tick using regex 
        date = tick.match(/[a-z]+ \d+/i)[0];
        time = tick.match(/\d+:\d+/i)[0];
        ampm = tick.match(/[a-z]\.[a-z]\./i)[0];
        
        
        if (last_date !== date) {   // Show Date
           last_date = date
           return date + " " + time + " " + ampm
        } else {                    // Don't show
           return time + " " + ampm
        }
       }

Leave a comment