Best IT Recipes

How to set the maximum and minimum value for the y axis

I am using a line chart from http://www.chartjs.org/ enter image description here

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

+125
Mar 11 '15 at 15:26
source share
16 answers

You must redefine the scale, try the following:

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 }); }
+63
Mar 11 '15 at 15:51
source share

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. } }] } };

For more information, see chart.js documentation on the configuration of linear axes .

+199
Feb 22 '16 at 12:30
source share

 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); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <canvas id="canvas"></canvas> </body>
+41
Aug 11 '16 at 13:18
source share

ChartJS v2.4.0

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

 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
+33
Feb 07 '17 at 10:19 on
source share

Writing this in 2016, while Chart JS 2.3.0 is the latest. Here's how to change it.

  var options = { scales: { yAxes: [{ display: true, stacked: true, ticks: { min: 0, // minimum value max: 10 // maximum value } }] } };
+20
Oct. 25 '16 at 15:06
source share

The above answers did not help me. Maybe the option names have been changed from "11", but the following trick is for me:

 ChartJsProvider.setOptions scaleBeginAtZero: true
+15
May 23 '15 at 8:11
source share
 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 using "options" in v2.

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

+13
Sep 26 '16 at 7:51
source share

Just set scaleStartValue to.

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

See the documentation for this here .

+7
Mar 11 '15 at 15:53
source share
 yAxes: [{ display: true, ticks: { beginAtZero: true, steps:10, stepValue:5, max:100 } }]
+7
May 16 '16 at 8:56 a.m.
source share

This is for Charts.js 2.0:

The reason some of them don't work is because you have to declare your parameters when creating the chart as follows:

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

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

+7
Jun 09 '16 at 2:53 on
source share

I wrote JS to display values ​​from 0 to 100 along the Y axis with a gap of 20.

This is my script.js

 //x-axis var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"]; //The percentage of vehicles of each type var percentage = [41, 76, 29, 50]; var ctx = document.getElementById("barChart"); var lineChart = new Chart(ctx, { type: 'bar', data: { labels: vehicles, datasets: [{ data: percentage, label: "Percentage of vehicles", backgroundColor: "#3e95cd", fill: false }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true, min: 0, max: 100, stepSize: 20, } }] } } });

This is a graph displayed on the Internet.

Percentage of vehicles in the town

+3
Feb 21 '19 at 5:39
source share

In 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 }
+2
Jun 06 '16 at 15:19
source share

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

 statsData.push(0); [...] var myChart = new Chart(ctx, { type: 'horizontalBar', data: { datasets: [{ data: statsData, [...]
0
Aug 29 '16 at 11:43 on
source share

I used the old version of the Flat Lab template in several of my projects that used v1.x diagrams. I'm not sure. I could not update v2.x, as I already had several projects working with it. The above (bardata,options) didn't work 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:

 calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);
0
May 26 '17 at 10:43
source share

In my case, I used the callback in ticks of jaxis, my values ​​are in percent, and when it reaches 100%, it does not show the point, I used this:

  yAxes: [{ ticks: { beginAtZero: true, steps: 10, stepValue: 5, max: 100.1, callback: function(value, index, values) { if (value !== 100.1) { return values[index] } } } }],

And it worked out well.

0
Jan 23 '19 at 10:33
source share

The chart has the min and max values. Documentation at this link

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

0
May 10 '19 at 13:10
source share


More articles:


All Articles