Chartjs：如何在y轴上仅显示最大值和最小值

Question

I'd like to override the nice number algorithm in Chart JS and 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 see the callback function ( yAxis.ticks.callback) already has the the ticks figured out so I don't think this is place to do it. Any help would be appreciated.

Answer 1

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>