[SOLVED] Chartjs: how to show only max and min values on y-axis

Chartjs: how to show only max and min values on y-axis

Using Chart.js, I'd like to display only two labels (or ticks) on the y-axis: the max and min of the values. The values are all floating point numbers.

I'm not sure if the callback function yAxis.ticks.callback is the place to do it.

Solution

You can use the following callback function for y-axis ticks to achieve that :

callback: function(value, index, values) {
   if (index === values.length - 1) return Math.min.apply(this, dataArr);
   else if (index === 0) return Math.max.apply(this, dataArr);
   else return '';
}

note: you must use a separate array for data values (here it's dataArr), instead of an in-line one.

EDIT :

add the following in your y-axis ticks config to make the data-points perfectly aligned with the ticks :

min: Math.min.apply(this, dataArr),
max: Math.max.apply(this, dataArr)

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var dataArr = [154.23, 203.21, 429.01, 637.41];
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr'],
      datasets: [{
         label: 'LINE',
         data: dataArr,
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)',
         fill: false,
         tension: 0
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               min: Math.min.apply(this, dataArr),
               max: Math.max.apply(this, dataArr),
               callback: function(value, index, values) {
                  if (index === values.length - 1) return Math.min.apply(this, dataArr);
                  else if (index === 0) return Math.max.apply(this, dataArr);
                  else return '';
               }
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>