Charts.js graph with multiple Y Axes

Question

I'm attempting to add a chart using Charts.js with multiple y Axes and it is not working. I've tried following all of the documentation out there, but the second y axis won't show no matter what I do. I know the data is good, because both datasets are showing - but it is only using the one axis of the first dataset. Here is my javascript:

var myLineChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: "Total Commission",
                            data: d[0],
                            backgroundColor: background_colors,
                            hoverBackgroundColor: hover_background_colors,
                            yAxyesID: "id1"
                        },{
                            label: "# of Commissions",
                            data: d[1],
                            type: 'line',
                            yAxesID: "id2"
                        }],
                    },
                    options: {
                        responsive: true,
                        elements: {
                            line :{
                                fill: false
                            }
                        },
                        title: {
                            display: true,
                            position: 'bottom',
                            text: 'Commissions Paid',
                            fontSize: 14
                        },
                        scales: [{
                           yAxes: [{
                               display: true,
                               position: 'left',
                               type: "linear",
                                scaleLabel: {
                                    display: true,
                                    labelString: 'USD',
                                    beginAtZero: true,
                                },
                               yAxisID: "id1"
                            },{
                               scaleLabel: {
                                    display: true,
                                    labelString: 'Commissions',
                                    beginAtZero: true,
                                },
                               display: false,
                               type: "linear",
                               position:"right",
                               gridLines: {
                                   display: false
                               },
                               yAxisID: "id2"
                            }]
                        }]
                    }
                });

And here is a screenshot of the resulting graph:

The little gray circles at the bottom display the correct number when you hover, but it won't create a separate y axis for it to follow as a scale.

Answer 1

Your problems are a mix of typos and wrong property names/types.

Here's a fixed version, with changes annotated:

var myLineChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: "Total Commission",
            data: d[0],
            backgroundColor: background_colors,
            hoverBackgroundColor: hover_background_colors,
            //yAxyesID: "id1"
            yAxisID: "id1" // typo in property name.
        },{
            label: "# of Commissions",
            data: d[1],
            type: 'line',
            //yAxesID: "id2"
            yAxisID: "id2" // typo in property name.
        }],
    },
    options: {
        responsive: true,
        elements: {
            line :{
                fill: false
            }
        },
        title: {
            display: true,
            position: 'bottom',
            text: 'Commissions Paid',
            fontSize: 14
        },
        //scales: [{
        scales: { // Shouldn't be an array.
           yAxes: [{
               display: true,
               position: 'left',
               type: "linear",
                scaleLabel: {
                    display: true,
                    labelString: 'USD',
                    beginAtZero: true,
                },
               //yAxisID: "id1"
               id: "id1" // incorrect property name.
            },{
               scaleLabel: {
                    display: true,
                    labelString: 'Commissions',
                    beginAtZero: true,
                },
               //display: false,
               display: true, // Hopefully don't have to explain this one.
               type: "linear",
               position:"right",
               gridLines: {
                   display: false
               },
               //yAxisID: "id2"
               id: "id2" // incorrect property name.
            }]
        //}]
        } // Shouldn't be an array.
    }
});

For me this yields (with falsified inputs as you didn't provide those):