Chartjs-Y-axis values are way to high

by

0👍

✅

I quickly built a dynamic height chart with some extra JS.

See JSfiddle: http://jsfiddle.net/ux1zxj2w/1/

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "June", "July"],
datasets: [{
    fillColor: "rgba(220,220,220,0.5)",
    strokeColor: "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
}, {
    fillColor: "rgba(151,187,205,0.5)",
    strokeColor: "rgba(151,187,205,0.8)",
    highlightFill: "rgba(151,187,205,0.75)",
    highlightStroke: "rgba(151,187,205,1)",
    data: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
}]

}

// find out max value of both data sets
// todo: loop over data sets when using a dynamic number of datasets
all_data = data.datasets[0].data.concat(data.datasets[1].data);
max = Math.max.apply(Math, all_data);
max_chart = max * 1.01 // +1%
max_chart = Math.round(max_chart / 10) * 10; //round to 10

$(function () {
    var canvas = $('.chart-canvas').get(0).getContext("2d");
    var salesChart = new Chart(canvas).Bar(data, {
        responsive: true,
        scaleShowVerticalLines: true,
        scaleBeginAtZero: false,
        scaleFontSize: 15,
        scaleFontStyle: "bold",
        scaleFontFamily: "Arial",
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : max_chart/10,
        scaleStartValue : 0
    });
});

1👍

If you want a cleaner-looking scale, you can use logarithmic mathematics. By rounding the maximum value to the nearest million, the scale will become:

  • Min -> 0
  • Max -> 12000000
  • Step -> 1200000
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "June", "July"],
    datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
    }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: ["290117", "350289", "2564303", "789082", "2545431", "764093", "512736", "11260578", "434955", "732576", "4194658", "596969", "1036631", "438442", "949191", "1008840"]
    }]
};

function flattenData(data, root, property) {
    return data[root].reduce(function (result, value) {
        return result.concat(value[property]);
    }, []);
}

// Find the maximum value in a list of data.
function calculateMax(data) {
    return Math.max.apply(Math, data);
}

// The number of digits can be counted either by the length
// of the number string (fastest way in JavaScript) or the
// log10 value (the mathematical way).
function digitCount(n, fastCalculate) {
    return fastCalculate ?
        n.toString().length :
        Math.floor(Math.log(n) / Math.log(10)) + 1;
}

// The magnitude of the value n in logarithmic scale.
function magnitude(n) {
    return Math.pow(10, digitCount(n));
}

// Logarithmically round a number.
function roundLog(n, precision) {
    var mag = magnitude(n);
    var pre = mag / Math.pow(10, precision);
    var scale = mag / pre;
    var base = Math.floor(n / scale) + 1;
    return base * scale;
}

// Round a number to the second most significant digit.
function roundMax(n) {
  return roundLog(n, digitCount(n) - 2 || 1);
}

// Maximum value in all the datasets, rounded to the nearest million.
var yMax = roundMax(calculateMax(flattenData(data, 'datasets', 'data')));

$(function () {
    var ctx = $('.chart-canvas').get(0).getContext("2d");
    var salesChart = new Chart(ctx).Bar(data, {
        responsive: false, // Turned this off to display on Stack Overflow
        scaleShowVerticalLines: true,
        scaleBeginAtZero: false,
        scaleFontSize: 15,
        scaleFontStyle: "bold",
        scaleFontFamily: "Arial",
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: yMax / 10,
        scaleStartValue: 0
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<canvas class="chart-canvas" height="280" width="540"></canvas>

Leave a comment