Charts.js scales yaxes ticks min max doesnt work-CodePudding

I have an HTML page with a charts.js chart that works. I'm trying to set the minimum and maximum values of the chart, but I can't set the minimum and maximum values. I searched different posts but they all say the same, and I'm pretty sure I'm already doing that...

> scales: {
>               yAxes: [{
>                 ticks: {
>                   min: -100,
>                   max: 100
>                 }
>               }]
>             }

I just cant figure out what's wrong.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
        <title>daily</title>
    </head>
    <body>
    <canvas class='temp_chart' id='temp_chart'>
    </body>
<script>
function square_data(chart){
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FFA500";
    ctx.rect(145, 70, 15, 15);
    ctx.fill()
    ctx.fillStyle = "#fff";
    ctx.fillText(chart.dataset.data[chart.dataIndex], 147,82, 10);

    ctx.stroke();
    return c
}
const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
var temperatures = [15, 18, 4, -6]
var ctx = document.getElementById('temp_chart').getContext('2d')
     window.chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: time_of_day,
        datasets: [{
          fill:false,
          label: 'Cantidad Estudiantes',
          data: temperatures,
          borderColor: [
            'rgba(0, 0, 0, 1)',

          ],
          borderWidth: 3
        }]
      },
      options: {
        plugins: {
            legend: {
            display: false,
         },
          datalabels: {
              anchor: 'start',
              align: '-45',
              clamp: true,
              color: "orange",
          }
        },
        elements:{
                "point":{"pointStyle":square_data},
            }
    },
    scales: {
          yAxes: [{
            ticks: {
              min: -100,
              max: 100
            }
          }]
        }
      });
</script>

CodePudding user response：

That is because you are using v2 syntax with v3, for all changes please read the migration guide and you defined the scale config outside of the options object.

In v3 all scales are an object where the key of the object is the ID of the scale

Also for the datalabels plugin to work you need to register it, see first line in the script block.

Last thing dont include 2 major versions of a lib, high chance of giving errors

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <title>daily</title>
</head>

<body>
  <canvas class='temp_chart' id='temp_chart'>
  </body>
  <script>
    Chart.register(ChartDataLabels); // Added this line
    
    function square_data(chart) {
      var c = document.createElement("canvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#FFA500";
      ctx.rect(145, 70, 15, 15);
      ctx.fill()
      ctx.fillStyle = "#fff";
      ctx.fillText(chart.dataset.data[chart.dataIndex], 147, 82, 10);

      ctx.stroke();
      return c
    }
    const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
    var temperatures = [15, 18, 4, -6]
    var ctx = document.getElementById('temp_chart').getContext('2d')
    window.chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: time_of_day,
        datasets: [{
          fill: false,
          label: 'Cantidad Estudiantes',
          data: temperatures,
          borderColor: [
            'rgba(0, 0, 0, 1)',

          ],
          borderWidth: 3
        }]
      },
      options: {
        // Changed this block
        scales: {
          y: {
            min: -100,
            max: 100,
          }
        },
        plugins: {
          legend: {
            display: false,
          },
          datalabels: {
            anchor: 'start',
            align: '-45',
            clamp: true,
            color: "orange",
          }
        },
        elements: {
          "point": {
            "pointStyle": square_data
          },
        }
      },
    });

  </script>