ChartJS setting Min Max on Y-axis

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.

Related Posts