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

Question

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.

how can we do the same in x axis? – HexaCrop May 03 '19 at 09:27 — HexaCrop, May 03 '19 at 09:27

ɢʀᴜɴᴛ · Accepted Answer · 2017-08-21T13:42:54.490

11

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>

edited Aug 21 '17 at 13:42

answered Aug 21 '17 at 02:42

ɢʀᴜɴᴛ

32,025
15
116
110

Thanks for your answer. This is not quite what I am looking for. The data in my problem are floating point numbers, and I want the y-axis to display only the max and min of the data set. For example, the values might be `[154.23, 203.21, 429.01, 637.41]`. I want to show on the y-axis only the max and min values: `154.23` and `637.41` The nice number algorithm rounds these values, which is not what I want. – Timothy Barmann Aug 21 '17 at 11:06
That is closer, but the problem with this solution is that the values on the y-axis don't necessarily align with the values in the chart. You are replacing the highest 'nice number' with the actual max, and the lowest 'nice number' with the actual min. The max and min are not being placed exactly where they should fall on the y-axis. This is why I don't think the solution can be attained by using the callback alone. – Timothy Barmann Aug 21 '17 at 12:53
then add `min: Math.min.apply(this, dataArr)` and `max: Math.max.apply(this, dataArr)` to the y-axis ticks. – ɢʀᴜɴᴛ Aug 21 '17 at 13:01
Yes! I think that works. https://jsfiddle.net/tbarmann/j1mxowoz/1/ Now how would I add padding on the top and bottom so that the values don't extend to the full top and bottom? – Timothy Barmann Aug 21 '17 at 13:05
you can decrease/increase min/max value by some number respectively - https://jsfiddle.net/j1mxowoz/3/, but then again the data-points won't be aligned and there's no other way to do so.. what you currently have is the correct behavior... – ɢʀᴜɴᴛ Aug 21 '17 at 13:23
perhaps you can do this - https://jsfiddle.net/j1mxowoz/6/ at the most.. – ɢʀᴜɴᴛ Aug 21 '17 at 13:47
1

Thanks so much for your help, ℊααnd ! – Timothy Barmann Aug 21 '17 at 14:18
how can we do the same in x axis? – HexaCrop May 03 '19 at 09:27
because min/max logic is repeated it should be extracted to a variable. This yields a simpler callback as: `callback: value => (value === maxScore || value === minScore ? value : '')` – John Vandivier Jan 13 '20 at 16:13

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

1 Answers1