Chart.js Bar graph will not start at zero as minimum value

Question

I am using Chart.js to display a line chart which is working correctly, except that I would like the y axis to start at 0 as the minimum value. Right now, the y axis starts at whatever the minimum value is in the data being displayed. I would like it to always show from zero.

This is the code I am using (whcih works, except does not start at 0 on the y axis).

<script type="text/javascript">
        $(document).ready(function(){
    $.ajax({
        url : "Get data from here",
        type : "GET",
        success : function(data){
            console.log(data);

      var userid = [];
      var viewers = [];


      for(var i in data) {
        userid.push(data[i].date_time);
        viewers.push(data[i].viewers);

      }

      var chartdata = 
        {
        labels: userid,
        datasets: 
                [
                    {
                    label: "Viewers for <?php echo $month . " - " . $year; ?>",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(59, 89, 152, 0.75)",
                    borderColor: "rgba(59, 89, 152, 1)",
                    pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                    pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                    data: viewers,
                    options: 
                        {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                        }
                                    }]
                                }
                        }
                    }
                ]
        };

      var ctx = $("#mycanvas");

      var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error : function(data) {

    }
  });
});
</script>

I added this part:

options: 
   {
   responsive: true,
   scales: {
       yAxes: [{
           ticks: {
               beginAtZero: true
                  }
              }]
            }
        }

But it doesn't seem to do anything and continues to display from whatever the minimum value in the data displayed is.

Any help would be appreciated.

Thank you.

Answer 1

Move the options part to the Chart creation:

var LineGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata,
    options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Here's an example from the docs.

Answer 2

options: {
     resposive: true,
     scales: {
             y: {
                suggestedMin: 0,
                suggestedMax: 100
                }
             }
     }