How to set max and min value for Y axis

Question

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

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?

score 347 · Answer 1 · edited Jan 10 '18 at 04:07

347

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.

edited Jan 10 '18 at 04:07

Pedro A

3,989
3
32
56

answered Feb 22 '16 at 12:30

Ofer Segev

5,094
2
22
22

42

see also the `min`, `max`, and `stepsize` attributes of the `ticks` namespace – Ralph Callaway Dec 23 '16 at 01:20
28

`suggestedMax` for the minimum top value – Finesse Nov 20 '17 at 07:49

score 88 · Answer 2 · answered Aug 11 '16 at 13:18

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>

every version of ng2-charts is so annoyingly different that every SO answer on it is useless — Wassim Katbey, Nov 02 '22 at 21:23

score 77 · Accepted Answer · edited Aug 05 '20 at 00:45

77

You have to overrride the scale, try this: (applies to ChartJS v1.x)

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 
    });
}

edited Aug 05 '20 at 00:45

ashleedawg

20,365
9
72
105

answered Mar 11 '15 at 15:51

Mousa Dirksz

989
7
3

64

Note this answer is relevant to the 1.x versions of chart.js The `scales` object in the 2.x versions is quite different. See @OferSegev answer below and the [2.x documentation here](http://www.chartjs.org/docs/). – Boaz Aug 14 '16 at 15:31
1

Is there documentation for v1.x as well @Boaz – Black Mamba May 25 '17 at 13:32
1

@IshanMahajan There used to be :) I can't seem to find it anymore. I think this is a good mirror: https://web-beta.archive.org/web/20150816192112/http://www.chartjs.org:80/docs/ – Boaz May 25 '17 at 13:48

score 72 · Answer 4 · edited Nov 10 '22 at 01:37

72

Edit:

They have made some changes. Currently, this is what will work

       scales: {
            x: {
                ...,
                max: value,
                min: value
            },
            y: {
                ...same as x
            }
        }

Here is the link to the latest changes min max chart js

Old answer:

As of Feb 2022, this works. Here is how one can change it

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

edited Nov 10 '22 at 01:37

user158

12,852
7
62
94

answered Oct 25 '16 at 15:06

Koushik Das

9,678
3
51
50

3

I would modify the answer to specify the versions instead of the date, since the answer to the question depends on the version. Chart.js 3.0 introduces a number of breaking changes including removing the xAxes and yAxes options, see https://www.chartjs.org/docs/3.7.0/getting-started/v3-migration.html – Yacc May 12 '22 at 15:12
no longer works with latest build – user160357 Sep 01 '22 at 12:04

score 47 · Answer 5 · edited Jul 25 '17 at 19:53

47

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:

edited Jul 25 '17 at 19:53

Eddie Martinez

13,582
13
81
106

answered Feb 07 '17 at 10:19

Tom Nijs

3,835
3
22
40

I'm surprised this works because I thought the `xAxes` and `yAxes` were supposed to be nested under `scales` in the options. That plus this is newer than Ofer Sergev's answer which appears to be correct is also surprising. – claudekennilol Dec 18 '18 at 19:04

score 22 · Answer 6 · answered Dec 07 '21 at 14:03

22

For "chart.js": "^3.6.1",

options: {          
    scales: {
        y: {
            min: 0,
            max: 100,
        }
    }
}

answered Dec 07 '21 at 14:03

Gardelin

950
11
30

7

April 2022 Chart.js v3.6.0: It's a pity this answer is not closer to the top of the page. I went through all previous answers unsuccessfully before trying this one which does exactly what I expected it to do. – Rodent Apr 04 '22 at 22:28
3

Same as @Rodent. Many mention the min/max inside `ticks`, but that doesn't work! The above answer is correct and it took me many tries as well. It "forces" the Y scale to fixed min/max regardless of what the data values are. – Fid Jun 03 '22 at 07:21
1

Same as @Fid, other answers are **not forcing** the chart to max value. This works like charm! – MrAlbino Jul 18 '23 at 13:54

score 21 · Answer 7 · answered May 01 '21 at 18:08

21

For Chart.js v3.2.0, do this:

let options = {
    scales: {
        y: {
            suggestedMin: 0,
            suggestedMax: 69
        },
        x: {
            suggestedMin: 0,
            suggestedMax: 420
        }
    }
}

Documentation: https://www.chartjs.org/docs/latest/axes/#axis-range-settings

answered May 01 '21 at 18:08

Andri

520
1
6
12

5

Nice to see someone actually reference chartJS 3 rarther than old v1 or v2 versions. – Martin Jul 01 '21 at 12:35
1

this worked for me, Thank you. My angular environment had configured like below, ...... "@angular/cdk": "^15.2.6", "chart.js": "^4.3.0", "ng2-charts": "^4.1.1", ...... – MishkuMoss Jun 15 '23 at 05:34

score 17 · Answer 8 · answered Sep 26 '16 at 07:51

17

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

answered Sep 26 '16 at 07:51

David Martinez Urrea

187
1
3

Thanks. This one worked for me on v2.5 of chart.js. Simple and effective. – Ionut Necula Apr 21 '17 at 14:01
2

The docs are so frustrating... I have to search people examples to guess the options available. – Adrian P. Jun 15 '17 at 18:18
If someone is using pure javascript, this answer is the correct one. I wrote a small example using this and I posted my complete js code below. – Ishara Amarasekera Feb 21 '19 at 05:43

score 17 · Answer 9 · answered Feb 21 '19 at 05:39

I wrote a js to display values from 0 to 100 in 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 the graph displayed on the web.

score 14 · Answer 10 · answered May 23 '15 at 08:11

14

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

answered May 23 '15 at 08:11

troelskn

115,121
27
131
155

score 9 · Answer 11 · answered Dec 11 '19 at 19:12

9

> Best Solution

  "options":{
                    scales: {
                                yAxes: [{
                                    display: true,
                                    ticks: {
                                        suggestedMin: 0, //min
                                        suggestedMax: 100 //max 
                                    }
                                }]
                            }
                    }

answered Dec 11 '19 at 19:12

Abdelhakim Ezzahraoui

481
5
12

Please provide a better description of your solution than "Best Solution". Also I would specify the versions since the answer to the question depends on the version. Chart.js 3.0 introduces a number of breaking changes including removing the xAxes and yAxes options, see chartjs.org/docs/3.7.0/getting-started/v3-migration.html – Yacc May 12 '22 at 15:15

score 8 · Answer 12 · answered Mar 11 '15 at 15:53

8

Just set the value for scaleStartValue in your options.

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

See the documentation for this here.

answered Mar 11 '15 at 15:53

rtome

1,953
2
22
27

This answer is better for me as it explicits how to choose the scale start value, if not 0 – Pechou Oct 24 '16 at 10:07

score 8 · Answer 13 · edited May 16 '16 at 09:13

8

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

edited May 16 '16 at 09:13

Tunaki

132,869
46
340
423

answered May 16 '16 at 08:56

Ramesh

1,495
12
14

1

Although this code may answer the question, providing additional context regarding _why_ and/or _how_ it answers the question would significantly improve its long-term value. Please [edit] your answer to add some explanation. – Toby Speight May 16 '16 at 11:41

JPeG · Answer 14 · 2016-06-09T17:23:01.363

6

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

edited Jun 09 '16 at 17:23

answered Jun 09 '16 at 14:53

JPeG

811
6
11

Is this adapting for changes in ChartJS that came with version 2.0 (I think the question and accepted answer one year ago dealt with ChartJS 1.x). Maybe this answer would even be more helpful if this is shortly explained. Maybe just comment on this comment if time allows. Thanks. – Dilettant Jun 09 '16 at 15:16
I didn't need to use `beginAtZero`. – ashleedawg Aug 05 '20 at 01:34

AZIIZ Farhat · Answer 15 · 2020-08-05T11:32:23.207

6

In my case, I used a callback in yaxis ticks, my values are in percent and when it reaches 100% it doesn't show the dot, I used this :

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

And it worked well.

edited Aug 05 '20 at 11:32

answered Jan 23 '19 at 10:33

AZIIZ Farhat

174
3
5

irrelevant to this question? – ashleedawg Aug 05 '20 at 01:32
Partly, I also added a solution to a problem that he is likely to encounter. – AZIIZ Farhat Aug 05 '20 at 11:33

score 4 · Answer 16 · answered Aug 05 '20 at 02:34

There's so many conflicting answers to this, most of which had no effect for me.

I was finally able to set (or retrieve current) X-axis minimum & maximum displayed values with chart.options.scales.xAxes[0].ticks.min (even if min & max are only a subset of the data assigned to the chart.)

Using a time scale in my case, I used:

chart.options.scales.xAxes[0].ticks.min = 1590969600000;  //Jun 1, 2020
chart.options.scales.xAxes[0].ticks.max = 1593561600000;  //Jul 1, 2020
chart.update();

(I found no need to set the step values or beginAtZero, etc.)

his is the only working answer for me. – jumpjack Sep 16 '21 at 07:58 — jumpjack, Sep 16 '21 at 07:58

score 3 · Answer 17 · answered Aug 07 '21 at 12:55

v3.X (v3.5.0)

Linear Cartesian Axis

let options = {
  scales: {
    y: {
      beginAtZero: true,
      suggestedMax: 69
    },
    x: {
      beginAtZero: true,
      suggestedMax: 420
    },
    ticks: {
      stepSize: 1
    }
  }
}

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

Linear Radial Axes


let options = {
  scales: {
    r: {
      beginAtZero: true,
      suggestedMax: 5,
      ticks: {
        stepSize: 1
      }
    }
  }
}

Ref. https://www.chartjs.org/docs/3.5.0/axes/radial/linear.html

v2.X (v2.9.4)

Linear Cartesian Axis

let options = {
    scale: {
      ticks: {
        beginAtZero: true,
        stepSize: 1,
        suggestedMax: 5,
      }
    }
}

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

Linear Radial Axes

let options = {
  scale: {
    ticks: {
      beginAtZero: true,
      stepSize: 1,
      suggestedMax: 5,
    }
  }
}

Ref. https://www.chartjs.org/docs/2.9.4/axes/radial/linear.html

Note: scale in singular in v2 and plural in v3

score 2 · Answer 18 · edited Jun 25 '16 at 10:02

2

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
}

edited Jun 25 '16 at 10:02

Linga

10,379
10
52
104

answered Jun 06 '16 at 15:19

Philippe Riand

673
4
12

answer outdated – ashleedawg Aug 05 '20 at 01:33

score 1 · Answer 19 · answered Aug 29 '16 at 11:43

1

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,
[...]

answered Aug 29 '16 at 11:43

Sceptical Jule

889
1
8
26

its shocking how none of the answers worked for me except for this one! beginAtZero and suggestedMin are broken for small values – bwrr Apr 10 '21 at 11:44

score 1 · Answer 20 · answered Sep 13 '22 at 11:37

As of the latest version v3.9.1, you can set your scale like this :

options:{
    scales:{
        y:{
            beginAtZero: true,
            max: 500 // values over 500 will be hidden, OR
            suggestedMax: 500, // maximum will be 500, unless there is a higher value
        }
    }
}

How to set max and min value for Y axis

20 Answers20

v3.X (v3.5.0)

Linear Cartesian Axis

Linear Radial Axes

v2.X (v2.9.4)

Linear Cartesian Axis

Linear Radial Axes

Linked