Guys, berikut ini cara agar tampilan Y-axis mendekati nilai maksimum dan minimum di ChartJS. Seperti gambar dibawah ini:
caranya adalah dengan menambahkan value min, max di option scales
options: {
scales: {
y: {
beginAtZero: false,
min: yMin,
max: yMax
},
}
variable yMin dan yMax harus di definisikan terlebih dahulu.
full sourcecode:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="idChart"></canvas>
var ctxx = document.getElementById('idChart');
yMin = 50
yMax = 90
new Chart(ctxx, {
type: 'line',
data: {
labels: [1,2,3,4,5],
datasets: [{
label: 'sample',
data: [80, 82, 70, 60,75],
borderWidth: 1,
}]
},
options: {
scales: {
y: {
min: yMin,
max: yMax
},
x: {
beginAtZero: true,
grid: {
display: false
}
},
},
plugins: {
legend: {
display: false,
},
},
}
});
ini demo nya: jsfiddle
terimakasih.