[Chartjs]-Want to provide a space between the maximum value and the graph

by

1👍

✅

You can make use of the grace option to add a percentage or x amount of space to the top

Doc: https://www.chartjs.org/docs/master/axes/cartesian/linear.html#grace

Live example:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 20, 3],
      borderWidth: 1,
      backgroundColor: 'red'
    }]
  },
  options: {
    scales: {
      y: {
        grace: '20%', // Add 20% to min and max
        // grace: 20 // Add 20 to min and max value always
      }
    }
  }
}

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/3.3.2/chart.js"></script>
</body>

0👍

I believe this is what you need:
https://www.chartjs.org/docs/latest/samples/scales/linear-min-max.html

You need to adjust the value on the max value here:

    scales: {
          y: {
            max: maxV,
          }
        }

Something like this basically, I set the upper limit to be 20% extra of the maximum value of the datasets. The 10000 is for rounding purpose.

    var arrMinmax = arrDataset1.concat(arrDataset2);
    var maxV = arrMinmax.reduce(function(a, b) { return Math.min(a, b) });
    maxV = Math.ceil(maxV/10000)*10000 * 1.2;

Leave a comment