Multiple Axis Line Chart

Question

I have problem getting dataset 2 (Score) to use the y1 scale, it seems to use scale for first dataset. Where is the error? I thought that using two y-scales should solve the problem with two very different datasets, but i only get the values from the "Completed" dataset, so I assume the data for "score" is there, but way way above the scale. . .

const CHART = document.getElementById("statChart");

let statChart = new Chart(CHART, {
    type: 'line',

    data: {
        labels: ["1", "2", "3", "4", "5", "6", "7"],
        datasets: [
            {
                type: 'line',
                label: "Completed",
                yAxesID: 'y',
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75, 192, 192, 0.4)",
                borderColor: "rgba(75, 192, 192, 1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                type: 'line',
                label: "Score",
                yAxesID: 'y1',
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75, 192, 192, 0.4)",
                borderColor: "rgba(75, 192, 192, 1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHitRadius: 10,
                data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
            }
        ]},


    options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    plugins:{
    title: {
      display: true,
      text: 'Your Result'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true,
    },},

    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
        min: 0,
        max: 100
      },
      y1: {
        type: 'linear',
        display: true,
        position: 'right',
        min: 0,
        max: 10000,
        // grid line settings
        grid: {
          drawOnChartArea: false, // only want the grid lines for one axis to show up
        }
      }
    }
  }
});

Answer 1

You have a typo, yAxesID should be yAxisID if you change that it will work fine as you can see in the example below:

const CHART = document.getElementById("statChart");

let statChart = new Chart(CHART, {
  type: 'line',

  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7"],
    datasets: [{
        type: 'line',
        label: "Completed",
        yAxisID: 'y',
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(75, 192, 192, 0.4)",
        borderColor: "rgba(75, 192, 192, 1)",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHitRadius: 10,
        data: [65, 59, 80, 81, 56, 55, 40]
      },
      {
        type: 'line',
        label: "Score",
        yAxisID: 'y1',
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(75, 192, 192, 0.4)",
        borderColor: "rgba(75, 192, 192, 1)",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHitRadius: 10,
        data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
      }
    ]
  },


  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    plugins: {
      title: {
        display: true,
        text: 'Your Result'
      },
      tooltips: {
        mode: 'nearest',
        intersect: true,
      },
    },

    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
        min: 0,
        max: 100
      },
      y1: {
        type: 'linear',
        display: true,
        position: 'right',
        min: 0,
        max: 10000,
        // grid line settings
        grid: {
          drawOnChartArea: false, // only want the grid lines for one axis to show up
        }
      }
    }
  }
});

<body>
  <canvas id="statChart" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>