Chartjs-How to ensure that a Chart.js line chart uses all space available on the y-axis?

by

1👍

✅

This turned out to be simpler than I’d expected. I didn’t find any relevant options in Chart.js, but I wrote a simple function to map the data points to a scale from 0 to 1000, which creates a chart with a y-axis of the same, meaning that the chart always draws at the full height.

Here’s the function:

var mapDataPoints = function(dataPoints) {
  var i, 
      max = Math.max.apply(null, dataPoints), 
      newDataPoints = [];

  for (i = 0; i < dataPoints.length; i++) {
    results.push((dataPoints[i] / max) * 1000);
  }

  return results;
};

Updated CodePen here.

Leave a comment