轴上的比例不会自动变窄

Question

I'm using chart.js but on some and only some of the graphs it creates the y-axis scale goes from 0-100 when a more appropriate scale might be 80-100. This means all the lines are bunched up at the top.

You can see what I mean if you visit mbi.dajubox.com and select '14 days' under waiting times. When the results come up beneath click the first entry (Calderdale And Huddersfield NHS Foundation Trust) and the graph appears. But the lines are bunched at the top.

If I go down to number 15 though (Stockport NHS Foundation Trust) it scales the axis ok.

The code that generates them is the same

var ctx = document.getElementById("myChart_"+provID).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {bezierCurve: false, multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"});

Can any one help me out?

Answer 1

This is because in your data you receive null values to display in the chart. Chartjs's min function is just a wrapper for the Math.min which will treat null as 0 .

A fix for this can be to override the helper function calculateScaleRange

Just declare this after you have Chart.js (or apply the small change straight to your Chart.js)

Chart.helpers.calculateScaleRange = function (valuesArray, drawingSize, textSize, startFromZero, integersOnly) {
     //Set a minimum step of two - a point at the top of the graph, and a point at the base
     var minSteps = 2,
         maxSteps = Math.floor(drawingSize / (textSize * 1.5)),
         skipFitting = (minSteps >= maxSteps);

     var maxValue =  Chart.helpers.max(valuesArray),
         minValue = Chart.helpers.min(valuesArray.map(function(value){
             //using map to create a new array where all nulls are mapped to Infinity so they do not pull the result down to 0
             return value === null ? Infinity: value;
         }));
        ................ //lots more code that is part of calculateScaleRange

here is a full example http://jsfiddle.net/leighking2/L9kLxpe1/