Chartjs-How to set lower and upper bound in react react-chartjs-2?

by

1👍

✅

You can make use of the suggestedMax property, in the example I setted the stepSize to 1, in case you wont do this it will round it to the next available stepsize to keep the scale scaling in tact.

To start at zero you can set the beginAtZero prop in the tick config to true

const data = [12, 19, 3, 5, 2, 3];
const maxDataEntry = Math.max(...data);

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false,
          suggestedMax: maxDataEntry + 4,
          stepSize: 1,
          beginAtZero: true
        }
      }]
    }
  }
}

var 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.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Leave a comment