Can’t render two charts on the same page from chart.js

I’ve been trying for the past hour to get Chart.js to render two line charts on the same page. I have ensured that my canvas element IDs are unique, as are my variables.

I am able to successfully load the first chart, ctx or canvas, but not the second chart, ctx2 or canvas2.

This is using chart.js v2.8.0

Here’s the log of errors from inspect element.

Input Data defined in index.html

var lineChartData = {
        labels: ['-18:00', '-15:00', '-12:00', '-9:00', '-6:00', '-3:00', '0:00'],
        datasets: [{
            label: 'Temperature (F)',
            borderColor: window.chartColors.red,
            backgroundColor: window.chartColors.red,
            fill: false,
            data: [
                60 - randomScalingFactor(),
                55 - randomScalingFactor(),
                57 - randomScalingFactor(),
                58 - randomScalingFactor(),
                59 - randomScalingFactor(),
                65 - randomScalingFactor(),
                73 - randomScalingFactor()
            ],
            yAxisID: 'y-axis-1',
        }]
    };

    var avgLineChartData = {
        labels: ['1', '1', '1', '1', '1', '1', '1'],
        datasets: [{
            label: 'Avg Temperature (F)',
            borderColor: window.chartColors.green,
            backgroundColor: window.chartColors.green,
            fill: false,
            data: [
                65 - randomScalingFactor(),
                53 - randomScalingFactor(),
                58 - randomScalingFactor(),
                54 - randomScalingFactor(),
                62 - randomScalingFactor(),
                65 - randomScalingFactor(),
                74 - randomScalingFactor()
            ],
            yAxisID: 'y-axis-1',
        }]
    };

Chart Drawing in index.html

window.onload = function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: lineChartData,
            options: {
                responsive: true,
                hoverMode: 'index',
                stacked: false,
                title: {
                    display: true,
                    text: 'Temp(F)/Humidity(%) per 15 Hours'
                },
                scales: {
                    yAxes: [{
                        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: 'left',
                        id: 'y-axis-1',
                        ticks: {
                            beginAtZero: true,
                            max: 100,
                        },
                    }, {
                        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: 'right',
                        id: 'y-axis-2',
                        ticks: {
                            beginAtZero: true,
                            max: 100,
                        },
                        // grid line settings
                        gridLines: {
                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                        },
                    }],
                },
                elements: {
                    line: {
                        tension: 0.3
                    }
                }
            }
        });

        var ctx2 = document.getElementById('canvas2').getContext('2d');
        new Chart(ctx2, {
            type: 'line',
            data: avgLineChartData,
            options: {
                responsive: true,
                hoverMode: 'index',
                stacked: false,
                title: {
                    display: true,
                    text: 'Avg Temp(F)/Humidity(%) per 7 Days'
                },
                scales: {
                    yAxes: [{
                        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: 'left',
                        id: 'avg-y-axis-1',
                        ticks: {
                            beginAtZero: true,
                            max: 100,
                        },
                    }, {
                        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: 'right',
                        id: 'avg-y-axis-2',
                        ticks: {
                            beginAtZero: true,
                            max: 100,
                        },
                        // grid line settings
                        gridLines: {
                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                        },
                    }],
                },
                elements: {
                    line: {
                        tension: 0.3
                    }
                }
            }
        });
    };

Canvas elements defined in index.html

<div class="container">
     <canvas id="canvas"></canvas>
     <canvas id="canvas2"></canvas>
</div>

Answer

in you data,

var avgLineChartData = {
        labels: ['1', '1', '1', '1', '1', '1', '1'],
        datasets: [{
            label: 'Avg Temperature (F)',
            borderColor: window.chartColors.green,
            backgroundColor: window.chartColors.green,
            fill: false,
            data: [
                65 - randomScalingFactor(),
                53 - randomScalingFactor(),
                58 - randomScalingFactor(),
                54 - randomScalingFactor(),
                62 - randomScalingFactor(),
                65 - randomScalingFactor(),
                74 - randomScalingFactor()
            ],
            yAxisID: 'y-axis-1',
        }]
    };

you set the yAxisId : 'y-axis-1'. but when you draw the chart, they are id: 'avg-y-axis-1'.