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>
Source:stackexchange.com