Chartjs - Two Y-axis scale problems

Question

I have multiple sets in a bar and line graph produced by chartjs V2 - https://jsfiddle.net/17mw40rx/

Clearly the right hand y axis isn't scaling properly or showing correct labels.

Ideally I'm trying to display the graph such that the maximum value for the left axis scales to the max of the highest bar. I would like the right hand y axis to then scale to the line graph values.

I'm after something like this: http://plnkr.co/edit/TvY5tz?p=info

Can someone help.

---

Code:

var entranceDataset = {
            label: 'IN',
            type: 'bar',
            yAxesID : "y-axis-1",
            data: [3, 11, 10, 6, 9, 28, 45, 40, 26, 3],
            backgroundColor: 'rgba(0, 204, 0, 0.2)',
            borderColor: 'rgba(0, 204, 0,1)',
            borderWidth: 1
        };

    var dataset = [];
    dataset.push(entranceDataset);

        var exitDataset = {
                label: 'OUT',
                type: 'bar',
                yAxesID : "y-axis-1",
                data: [2, 0, 3, 7, 11, 13, 8, 44, 35, 3, 46, 1],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            };

        dataset.push(exitDataset);



    var lineDataset = {
        type: 'line',
        label: 'Total',
        yAxesID : "y-axis-2",
        backgroundColor: "rgba(255,255,255,0.5)",
        data: [0, 30, 62, 100, 100, 100, 114, 77, 57, 54, 10, 10],
        borderColor: 'rgba(255, 93, 0, 0.6)',
        borderWidth: 2
    }

    dataset.push(lineDataset);


    var ctx = $('#throughput-canvas');

    mainThroughputChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["13:30", "13:40", "13:50", "14:00", "14:10", "14:20", "14:30", "14:40", "14:50", "15:00", "15:10", "15:20"],
            datasets: dataset
        },
        options: {
            scales: {
                yAxes: [{
                    id:"y-axis-1",
                    position:'left',
                    type: 'linear',
                    ticks: {
                        beginAtZero:true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Throughput'
                      }
                    },
                      {
                    id:"y-axis-2",
                    position:'right',
                    type: 'linear',
                    /*ticks: {
                        beginAtZero:true
                    },*/
                    scaleLabel: {
                        display: true,
                        labelString: 'Attendance'
                      }
                }],
                xAxes : [{
                    gridLines : {
                        display : false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Time'
                      }
                }]
            },

        }
    });

Answer 1

It's ok found the answer on Github. Turns out it was a typo in the Dataset object property and should have been yAxisID.

https://jsfiddle.net/17mw40rx/1/