CODEWITHSUNDEEP
javascriptchartschart.js
tjugg
tjugg

Reputation: 3357

Chart.js automatic scaling

I've been testing out chart.js for maybe including it in a project. I just have one smallish issue with it. It doesn't scale some datasets properly. I found somewhat similar questions here in SO, but nothing really that would solve my issue.

So this is what my chart looks like with some datasets: enter image description here

For some reason, the max values (2.2) look ugly as hell. The reason is, that the dataset has a set of three duplicate values in this case (2.2, 2.2, 2.2). I would like there to be some room on top of this series, so that it would look a bit more reasonable.

How do you properly add "padding" on top the the series line? I would like a solution where I could rely on chart.js to find out the max value, and then maybe update that with some padding on the scale(like x + 10). Issue is, that I cant just hard code the min max values, because I can have over 200 different values that can be selected, and they can vary A LOT in scale.

Here is how I render the chart for now:

    return new Chart(context, {
    type: 'line',
    data: { 
        labels: labels.data,
        datasets: dataSets
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            ticks: {
                beginAtZero: false
            },
            yAxes: [{
                ticks: {
                    beginAtZero: false
                },
                id: 'A',
                type: 'linear',
                position: 'left',
            }, {
                ticks: {
                    beginAtZero: false
                },
                display: displayBAxis,
                id: 'B',
                type: 'linear',
                position: 'right',
            }]
        }
    }
});

Upvotes: 2

Views: 6947

Answers (2)

Ben Worline
Ben Worline

Reputation: 11

You can find the min and max of your dataset, then add/subtract a percentage of the difference (range).

For example, say you use 1% of the range.

[0.1, 0.2, 0.5] gives (1%)x(0.5-0.1)=0.004, so [min,max]=[0.096,0.504].

[1500, 1800, 3500, 3600] gives (1%)x(3600-1500)=21, so [min,max]=[1479,3621].

Upvotes: 1

Matt
Matt

Reputation: 1082

This may not be the cleanest way but you can play with it as you see fit.

In short, you need to create a function that finds the max value out of all your dataSets arrays and in yAxes.ticks set max to that functions return value.

More details below

Referencing here first:

data:{
    labels: labels.data,
    datasets: dataSets //talking about this first
}

Create a function that will go through these arrays and get the max of all arrays. I did it using this but you can do it better I'm sure:

function getMax(){
    var max = 0;
    dataSets.forEach(function(x, i){        
        max = Math.max(max, Math.max.apply(null, x.data));
    });

    return max + 2;
}

Then in your return in yAxes you should be able to have:

ticks: {
    beginAtZero: false,
    max: getMax()
},

Upvotes: 1

Related Questions