Second yAxes values not charting correctly with Chart.js

Question

I've got one data-set values not showing in dual-yAxes charting.

I've got the general Chart.js code working with dual data-sets and dual yAxes. however, one data set is not showing correctly on chart. the "Temp" values range between 66 and 78, but appear to be "off the chart" despite the min/max range values I use.

See my code here on JSFiddle

<div style="width:75%">
     <canvas class=".content" id="myChart" ></canvas>
</div>


<Script>
var canvas = document.getElementById('myChart').getContext('2d');

// @ts-ignore
var myChart = new Chart(canvas, {
    options: {
        scales: {
            yAxes: [
                {
                id: 'SG',
                //type: 'linear',
                position: 'left',
                ticks: 
                    {
                    min: 1,
                    max: 1.1
                    }             
                }, 
                {
                id: 'Temp',
                //type: 'linear',
                position: 'right',
                ticks: 
                    {
                    min: 32,
                    max: 100
                    }
                }
            ]
        }
    },
    type: 'bar', //not really needed, over-ridden below
    data: {
        labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri'],
        datasets: [{
            label: 'Gravity',
            yAxesID: 'SG',
            data: [1.07, 1.045, 1.030, 1.014, 1.012],
            backgroundColor: '#ff6384' //red
        }, {
            //type: 'line',
            label: 'Temp F',
            yAxesID: 'Temp',
            data: [78, 66, 78, 66, 76],
            backgroundColor: '#36a2eb' //blue
        }]
    }
});

</Script>

Maybe I'm missing something specific to dual-yAxes charting...

Answer 1

There is a spelling mistake replace yAxesID with yAxisID, and the dataset population should look like the below code or you can see the fiddle for your reference -> https://jsfiddle.net/69p7Lsth/1/

datasets: [{
      label: 'Gravity',
      yAxisID: 'SG',
      data: [1.07, 1.045, 1.030, 1.014, 1.012],
      backgroundColor: '#ff6384' //red
    }, {
      label: 'Temp F',
      yAxisID: 'Temp',
      data: [8, 66, 78, 66, 76],
      backgroundColor: '#36a2eb' //blue
    }]