cant resize range of Y axis of chart in HTML/PHP

Question

new account here, so basically i have code like this

<div class="row">

     <div class="col-lg-6 col-xs-12 col-sm 12 ">
      <div class="box box-solid box-success">
<?php
$barang       = mysqli_query($conn, "SELECT k.nama FROM kategori k  LEFT JOIN barang b ON k.kode = b.kategori  group by k.kode");
$stok         = mysqli_query($conn, "SELECT COUNT(*) as kategori FROM kategori k LEFT JOIN barang b   ON k.kode = b.kategori  group by k.nama");
?>
     
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
        <style type="text/css">
            
        </style>
        <script src="/libs/chart.bundle.js"></script>
        <style type="text/css">
            
        </style>
    
          
        <div class="chart-container">
            <canvas  class="my-4 chartjs-render-monitor" id="myChart" width="443" height="229" style="display: block; width: 443px; height: 229px;"></canvas>
            <center><h2>Barang dalam STOK</h2></center>
        </div>
        <script>
          
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                     labels: [<?php while ($b = mysqli_fetch_array($barang)) { echo '"' . $b['nama'] . '",';}?>],
                    datasets: [{
                            label: '# stok',
                            data: [<?php while ($p = mysqli_fetch_array($stok)) { echo '"' . $p['kategori'] . '",';}?>],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.9)',
                                'rgba(54, 162, 235, 0.7)',
                                'rgba(255, 206, 86, 0.8)',
                                'rgba(75, 192, 192, 0.3)',
                                'rgba(153, 102, 255, 0.7)',
                                'rgba(255, 159, 64, 0.3)',
                                'rgba(255, 99, 132, 0.8)',
                                'rgba(54, 162, 235, 0.6)',
                                'rgba(255, 206, 86, 0.8)',
                                'rgba(75, 192, 192, 0.6)',
                                'rgba(153, 102, 255, 0.4)',
                                'rgba(255, 159, 64, 0.7)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderWidth: 1
                        }]
                },
                options: {
                    scales: {


                    }
                }
            });
        </script>
    
    </div>
</div>

the result is like this enter image description here

Since the range of Y axis is between 3.0, 3.1 - 5.0. it makes one of the data seems like zero frequency because the lowest value on y axis is 3.0 not 0, how to change the range on Y axis so it becomes 0 - 10 without any comma. thank you

Answer 1

You can use the min and max property together with the stepSize:

const options = {
  type: 'bar',
  data: {
    labels: ["Smartphone", "Trahsphone"],
    datasets: [{
      label: '# of Votes',
      data: [4, 4],
      backgroundColor: [
        'rgba(255, 99, 132, 0.9)',
        'rgba(54, 162, 235, 0.7)',
      ]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 10,
          stepSize: 1
        }
      }]
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</body>