FeR-S
FeR-S

Reputation: 339

How to expand the "Y" scale of the data in chart.js?

How to expand the "Y" scale of the data to lookes more beautiful? The bar data is cut off by the top border of the graph. If the maximum number is 100, then display, for example, 110, that would be a small padding from the top border.

My code: https://jsfiddle.net/selvestrstal/ent8zchq/

var data = {
   labels: ["January", "February", "March", "April", "May", "June", "July"],
   datasets: [{
      label: "First dataset",
      data: [65, 100, 100, 81, 56, 55, 90]
   }, {
      label: "Third dataset",
      data: [38, 55, 50, 65, 35, 67, 54]
   }]
}; 

var chart = new Chart('graph_data', {
    type: 'line',
    data: data,
    options: {
        maintainAspectRatio: false,
        responsive: true,
        filler: {
            propagate: true
        },
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                title: function(i, val) {
                    return [0].xLabel;
                },
            },
        },
        legend: {
           display: true,
        },
        layout: {
            padding: {
                left: 5,
                right: 5,
                top: 5,
                bottom: 10
            }
        },
        scales: {
            padding: 10,
            xAxes: [{
                display: true,
                ticks: {
                    autoSkip: true,
                    offset: true,
                    maxRotation: 0,
                    padding: 5,
                },
                scaleLabel: {
                    display: true,
                }
            }],
            yAxes: [{
                display: true,
                 ticks: {
                    autoSkip: true,
                    offset: true,
                    maxRotation: 0,
                    beginAtZero: false,
                    padding: 5,
                },
            }]
        }
    }
});

enter image description here enter image description here

Upvotes: 0

Views: 939

Answers (1)

foyss
foyss

Reputation: 983

Override the scale:

Try something like this:

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 50,
        scaleStartValue : 0 
    });
}

A max option is also viable, as it helped the author of the question.

Upvotes: 1

Related Questions