[Chartjs]-How to disable last/max value shown on x axis in chart js?

by

1👍

✅

You can use a callback function for x-axis’ ticks to hide/disable the last value, like so :

scales: {
   xAxes: [{
      ticks: {
         callback: function(tick) {
            // if tick/value is not equals to '23:00'
            // then return the tick/value
            // else return an empty string
            return tick !== '23:00' ? tick : '';
         }
      }
   }]
}

ᴅᴇᴍᴏ ⧩

log = console.log;

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['19:00', '20:00', '21:00', '22:00', '23:00'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               callback: function(tick) {
                  // if tick/value is not equals to '23:00'
                  // then return the tick/value
                  // else return an empty string
                  return tick !== '23:00' ? tick : '';
               }
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Leave a comment