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
Advertisement
Answer
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>