CODEWITHSUNDEEP
javascriptchart.js
Duefectu
Duefectu

Reputation: 1642

ChartJS: Limit Y Axis to cut outlimit values

I'm using ChartJS to show graph with some out of my limits values making the chart less usable, example: enter image description here

I want to cut the Y axis to show more exact data, something like this: enter image description here

I tried with this: 

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx, {
  type: 'line',
  data: lineData,
  options: lineOptions,
  scales: {
    yAxes: [{
      display: true,
      ticks: {
        min: 0,
        max: 600
      }
    }]
  }
});

But this not Works. Anysuggestion?

Upvotes: 1

Views: 1992

Answers (2)

Jürgen Fink
Jürgen Fink

Reputation: 3535

Updated to Chart.js v3.2.0

In latest version of Chart.js v3.xx (which is not backwards compatible with v2.xx) you would have to place the min: 0 and max: 600 outside the ticks object:

options: {
   scales: {
      y: {
         min: 0,
         max: 600,
         ticks: {
            // min max not inside here anymore
         }
      }
   }
}

Source: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size

Upvotes: 3

Tom Glover
Tom Glover

Reputation: 3026

Scales should be placed inside options in the json like in this example:

https://jsfiddle.net/52afmcej/

options: {
   scales: {
      yAxes: [{
          ticks: {
             min: 0,
             max: 600,      
             }
          }]
      }
   }

Hope this helps :)

Upvotes: 2

Related Questions