[Chartjs]-Charts.js scales yaxes ticks min max doesnt work

by

2👍

✅

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/chart.js@3.0.0/dist/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></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>

Leave a comment