CODEWITHSUNDEEP
chart.js
omega1
omega1

Reputation: 1052

chart.js how to force min and max y axis values

I have a chart.js on a page and am struggling to set the min and max values on the Y axis, these are the options set:

var areaChartOptions = {
      
      showScale               : true,
      scaleShowGridLines      : false,
      scaleGridLineColor      : 'rgba(0,0,0,.05)',
      scaleGridLineWidth      : 1,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines  : true,
      bezierCurve             : true,
      bezierCurveTension      : 0.3,
      pointDot                : false,
      pointDotRadius          : 4,
      pointDotStrokeWidth     : 1,
      pointHitDetectionRadius : 20,
      datasetStroke           : true,
      datasetStrokeWidth      : 2,
      datasetFill             : true,
      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
      //Boolean -  to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio     : true,
      responsive              : true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }
    }

But it is neither beginning at zero nor is it respecting the suggestedMin or suggestedMax

the yAxes seems to be set here :

datasets: [
        {
          yAxisID             : 'yAxes',
          label               : 'Listeners',
          fillColor           : 'rgba(0, 166, 90,1)',
          strokeColor         : 'rgba(0, 166, 90,1)',
          pointColor          : 'rgba(0, 166, 90,1)',
          pointStrokeColor    : '#00a65a',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(0, 166, 90,1)',
          data                :

What I would like to do is to force the charts Y axis to have the values that I set myself (in this example 0 as the minimum and 100 as the maximum).

Thanks in advance.

Upvotes: 0

Views: 1541

Answers (1)

uminder
uminder

Reputation: 26190

I suppose you're using Chart.js version 3.

According to the 3.x Migration Guide, the following relevant changes have been made since v2.

  • scales.[x/y]Axes.ticks.beginAtZero was renamed to scales[id].beginAtZero
  • scales.[x/y]Axes.ticks.max was renamed to scales[id].max
  • scales.[x/y]Axes.ticks.min was renamed to scales[id].min
  • scales.[x/y]Axes.ticks.suggestedMax was renamed to scales[id].suggestedMax
  • scales.[x/y]Axes.ticks.suggestedMin was renamed to scales[id].suggestedMin

Therefore, instead of...

scales: {
  yAxes: [{
    ticks: {
      beginAtZero: true,
      suggestedMax: 100
    }
  }
}

...you now have to define:

scales: {
  y: {
    beginAtZero: true,
    suggestedMax: 100
  }
}

Upvotes: 1

Related Questions