CODEWITHSUNDEEP
javascripthtmlcanvaschart.jsaxes
Qi Yu
Qi Yu

Reputation: 31

yAxes not working with min max option

I checked several posts. However none of the solution solved my issue.

It's a quite standard usage of min and max. I use the same setting in Barchart and it worked. not working in line chart on the same page.

I tried with suggestedMax, suggestedMin as well.

By the way, my dataset has multiple line series.

version 2.1.6

var ctx = document.getElementById(canvas);
   var lineChart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,

    option: {
        scales: {
        yAxes: [ {
//              type: 'linear',
            ticks: {
                beginAtZero: true,
                max : 50,
                min : 0,

                }
            } ]
        }
    }

Then I tried a piece of code from another post...not working....

var data = {
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 datasets: [
    {
        label: "Test dataset",
        fill: false,
        data: [65, 59, 80, 81, 56, 55, 40],
    }
]
};
var ctx = document.getElementById("testLineChart");
    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: data,
        option: {
            scales: {
            yAxes: [ {
                type: 'linear',
                ticks: {
                    beginAtZero: true,
                    min : 0,
                    max : 100,
                    }
                } ]
            }
        }
    });

Upvotes: 3

Views: 3606

Answers (1)

Miguel Péres
Miguel Péres

Reputation: 640

You have to use lowercase, to match Chartjs object attribute for min and max. Using the first letter as uppercase, you are creating a new field in the object, which is not parsed by Chartjs.

Try changing your code to:

ticks: {
            beginAtZero: true,
            max : 50,
            min : 0,
       }

UPDATE:

When creating a chart, the options attribute should be plural (options instead of option), you are missing an S in the word.

The correct way is:

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: { ... }
}

Upvotes: 1

Related Questions