ChartJS : How to set max and min value for Y axis

问题:

I am using line chart from http://www.chartjs.org/

As you can see max value (130) and min value (60) for Y axis are chosen automatically , I want max value = 500 and min value=0. Is this possible?

回答1:

You have to overrride the scale, try 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      }); }

回答2:

For chart.js V2 (beta), use:

var options = {     scales: {         yAxes: [{             display: true,             ticks: {                 suggestedMin: 0,    // minimum will be 0, unless there is a lower value.                 // OR //                 beginAtZero: true   // minimum value will be 0.             }         }]     } };

See chart.js documentation on linear axes configuration for more details.

回答3:

var config = {             type: 'line',             data: {                 labels: ["January", "February", "March", "April", "May", "June", "July"],                 datasets: [{                         label: "My First dataset",                         data: [10, 80, 56, 60, 6, 45, 15],                         fill: false,                         backgroundColor: "#eebcde ",                         borderColor: "#eebcde",                         borderCapStyle: 'butt',                         borderDash: [5, 5],                     }]             },             options: {                 responsive: true,                 legend: {                     position: 'bottom',                 },                 hover: {                     mode: 'label'                 },                 scales: {                     xAxes: [{                             display: true,                             scaleLabel: {                                 display: true,                                 labelString: 'Month'                             }                         }],                     yAxes: [{                             display: true,                             ticks: {                                 beginAtZero: true,                                 steps: 10,                                 stepValue: 5,                                 max: 100                             }                         }]                 },                 title: {                     display: true,                     text: 'Chart.js Line Chart - Legend'                 }             }         };          var ctx = document.getElementById("canvas").getContext("2d");        new Chart(ctx, config);

回答4:

ChartJS v2.4.0

As shown in the examples at https://github.com/jtblin/angular-chart.js on the 7th of febuary 2017 (since this seems to be subject to frequent change):

var options = {     yAxes: [{         ticks: {             min: 0,             max: 100,             stepSize: 20         }     }] }

This will result in 5 y-axis values as such:

100 80 60 40 20 0

回答5:

The above answers didn't work for me. Possibly the option names were changed since '11, but the following did the trick for me:

ChartJsProvider.setOptions   scaleBeginAtZero: true

回答6:

window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx ,{           type: 'line',           data: yourData,           options: {             scales: {                 yAxes: [{                     ticks: {                         beginAtZero:true,                         min: 0,                         max: 500                         }                   }]                }             } });

I configure with 'options' in v2.

You should read documentation: http://www.chartjs.org/docs/#scales-linear-scale

回答7:

Just set the value for scaleStartValue in your options.

var options = {    // ....    scaleStartValue: 0, }

See the documentation for this here.

回答8:

yAxes: [{     display: true,     ticks: {         beginAtZero: true,         steps:10,         stepValue:5,         max:100     } }]

回答9:

Writing this in 2016 while Chart js 2.3.0 is the latest one. Here is how one can change it

              var options = {                     scales: {                        yAxes: [{                                 display: true,                                 stacked: true,                                 ticks: {                                     min: // minimum value                                     max: // maximum value                                 }                        }]                     }                };

回答10:

This is for Charts.js 2.0:

The reason some of these are not working is because you should declare your options when you create your chart like so:

$(function () {     var ctxLine = document.getElementById("myLineChart");     var myLineChart = new Chart(ctxLine, {         type: 'line',         data: dataLine,         options: {             scales: {                 yAxes: [{                     ticks: {                         min: 0,                         beginAtZero: true                     }                 }]             }         }      }); })

Documentation for this is here: http://www.chartjs.org/docs/#scales

回答11:

With 1.1.1, I used the following to fix the scale between 0.0 and 1.0:

var options = {     scaleOverride: true,     scaleStartValue: 0,     scaleSteps: 10,     scaleStepWidth: 0.1 }

回答12:

Since none of the suggestions above helped me with charts.js 2.1.4, I solved it by adding the value 0 to my data set array (but no extra label):

statsData.push(0);  [...]  var myChart = new Chart(ctx, {     type: 'horizontalBar',     data: {         datasets: [{             data: statsData, [...]

回答13:

I was using a old version of Flat Lab template in multiple projects of mine which were using v1.x of chart.js which I'm not sure of.I could not update to v2.x as I already had multiple projects working with it. The above mentioned (bardata,options) was not working for me.

So here is the hack for version 1.x

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);

Replace it with:

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);

转载请标明出处:ChartJS : How to set max and min value for Y axis

文章来源: ChartJS : How to set max and min value for Y axis