The scale on the axis doesn't automatically narrow

by

šŸ‘:0

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/

Leave a comment