How to set max and min value for Y axis

Question

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

User · Accepted Answer

You have to overrride the scale  try this    applies to ChartJS v1 x  window onload   function        var ctx   document getElementById  quot canvas quot   getContext  quot 2d quot        window myLine   new Chart ctx  Line lineChartData            scaleOverride   true          scaleSteps   10          scaleStepWidth   50          scaleStartValue   0

User · Answer

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

User · Answer

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

User · Answer

x000D   x000D  var config     x000D              type   line   x000D              data    x000D                  labels    January    February    March    April    May    June    July    x000D                  datasets     x000D                          label   My First dataset   x000D                          data   10  80  56  60  6  45  15   x000D                          fill  false  x000D                          backgroundColor    eebcde    x000D                          borderColor    eebcde   x000D                          borderCapStyle   butt   x000D                          borderDash   5  5   x000D                         x000D                 x000D              options    x000D                  responsive  true  x000D                  legend    x000D                      position   bottom   x000D                     x000D                  hover    x000D                      mode   label  x000D                     x000D                  scales    x000D                      xAxes     x000D                              display  true  x000D                              scaleLabel    x000D                                  display  true  x000D                                  labelString   Month  x000D                                x000D                              x000D                      yAxes     x000D                              display  true  x000D                              ticks    x000D                                  beginAtZero  true  x000D                                  steps  10  x000D                                  stepValue  5  x000D                                  max  100 x000D                                x000D                             x000D                     x000D                  title    x000D                      display  true  x000D                      text   Chart js Line Chart - Legend  x000D                    x000D                x000D             x000D   x000D          var ctx   document getElementById  canvas   getContext  2d    x000D         new Chart ctx  config   x000D   lt script src  https   cdnjs cloudflare com ajax libs Chart js 2 2 1 Chart bundle js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt body gt  x000D     lt canvas id  canvas  gt  lt  canvas gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

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

User · Answer

I wrote a js to display values from 0 to 100 in y-axis with a gap of 20   This is my script js   x000D   x000D    x-axis x000D  var vehicles     Trucks    Cars    Bikes    Jeeps    x000D   x000D    The percentage of vehicles of each type x000D  var percentage    41  76  29  50   x000D   x000D  var ctx   document getElementById  barChart    x000D  var lineChart   new Chart ctx    x000D    type   bar   x000D    data    x000D      labels  vehicles  x000D      datasets     x000D        data  percentage  x000D        label   Percentage of vehicles   x000D        backgroundColor    3e95cd   x000D        fill  false x000D         x000D       x000D    options    x000D      scales    x000D        yAxes     x000D          ticks    x000D            beginAtZero  true  x000D            min  0  x000D            max  100  x000D            stepSize  20  x000D            x000D           x000D        x000D      x000D      x000D   x000D   x000D    This is the graph displayed on the web

User · Answer

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

User · Answer

Best Solution       options                        scales                                    yAxes                                         display  true                                      ticks                                            suggestedMin  0    min                                         suggestedMax  100   max

User · Answer

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  0     minimum value                 max  10    maximum value

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  amp  maximum displayed values with chart options scales xAxes 0  ticks min  even if min  amp  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

User · Answer

Just set the value for scaleStartValue in your options   var options                   scaleStartValue  0      See the documentation for this here

User · Answer

yAxes         display  true      ticks            beginAtZero  true          steps 10          stepValue 5          max 100

User · Answer

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

[chart.js] How to set max and min value for Y axis

Examples related to chart.js