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

Question

I'm working on a project with Chart.js where I:

Instantiate a line chart with two initial datasets of all zeroes.
Load some data from an API, then update the two datasets with new, actual data.

Please see this simplified example. Here's the code:

var context = $('#myChart').get(0).getContext('2d'),
    newData = [
      [65, 59, 80, 81, 55],
      [28, 48, 40, 19, 90]
    ],
    initialData = {
      labels: ['1', '2', '3', '4', '5'],
      datasets: [
        {
            fillColor: 'rgba(220, 220, 220, 0.2)',
            strokeColor: 'rgba(220, 220, 220, 1)',
            pointColor: 'rgba(220, 220, 220, 1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(220, 220, 220, 1)',
            data: [0, 0, 0, 0, 0, 0]
        },
        {
            fillColor: 'rgba(151, 187, 205, 0.2)',
            strokeColor: 'rgba(151, 187, 205, 1)',
            pointColor: 'rgba(151, 187, 205, 1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(151, 187, 205, 1)',
            data: [0, 0, 0, 0, 0, 0]
        }
      ]
    },
    myChart = new Chart(context).Line(initialData);

setTimeout(function() {
  var i, j;
  for (i = 0; i < newData.length; i++) {
    for (j = 0; j < newData[i].length; j++) {
      myChart.datasets[i].points[j].value = newData[i][j];
    }
  }
  myChart.update();
}, 2000);

That works well, but depending on the data I get back, the graph's y-axis scale can change. That's expected behavior, but if one data point is an outlier and is an order of magnitude beyond the rest, it can throw off the proportions of the chart's y-axis (note the data point of 1001 in lieu of 90 in this example). The chart compensates by setting the maximum y value to 2000, so nearly half of the vertical axis is now empty.

How can I modify this behavior to always fill the chart as much as possible? In my project, I'm hiding the y-axis labels, so I don't care if they're not round values; I'd prefer the maximum chart value to be 1001, not 2000, and for the chart to fill the available vertical space.

I don't see any sort of options to allow for this behavior in the Chart.js docs. I'm looking into the source code now to see if I can modify it.

Another idea - maybe I can run the values returned from the API through some sort of function to map them to values from 1 to 100, or 1 to 1000? That way Chart.js would theoretically always use the same y-axis scale, and the charts would remain proportional? If that makes sense, what would that function look like?

Bungle Bungle · Accepted Answer · 2015-09-22T06:45:00

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.

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

1 Answers