CODEWITHSUNDEEP
javascriptjsonchart.js
nightmarelines
nightmarelines

Reputation: 33

Chart.js does not scale with two yAxis

I struggle to let my second y-Axis scale to my second data array. The green data should be scaled according to the right y-Axis (not working). The red data is correctly scaled to the left y-Axis.

enter image description here

<div id="chartWrapper" class="card-content column is-two-thirds">
          <canvas id="myChart" height="250px"></canvas>
          <script>
            const ctx = document.getElementById('myChart').getContext('2d');
            const myChart = new Chart(ctx, {
              type: 'line',
              data: {
                labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
                datasets: [{
                  label: 'Temperatur in C°',
                  yAxisID: 'A',
                  borderColor: "red",
                  data: 0
                },
                {
                  label: 'Niederschlagsmenge in mm',
                  yAxisID: 'B',
                  borderColor: "blue",
                  data: 0
                }]
              },
              options: {
                scales: {
                  A: {
                    type: 'linear',
                    beginAtZero: false,
                    position: 'left',
                    display: true
                  },
                  B: {
                    type: 'linear',
                    beginAtZero: false,
                    position: 'right',
                    display: true
                  }
                }
              }
            });

          </script>
        </div>

Don't be confused with the data being 0, I add the data dynamically.

Thank you very much for any help.

Upvotes: 1

Views: 161

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31341

This is because you are using V2 of chart.js in which the scales need to be configured as arrays like so:

new Chart(ctx, {
  type: 'line',
  data: {},
  options: {
    scales: {
      yAxes: [{
        id: 'A'
      }, {
        id: 'B'
      }]
    }
  }
})

Upvotes: 1

Related Questions