Trying to get multiple chart.js charts to load on the same page

Question

For some reason I can't figure out how to get multiple chart.js charts to load on the same page. I can get one to load just fine, but when I add more, none of them load. Any ideas as to what I'm doing wrong?

<div class="game-cards col-lg-5">
        <div class="chart-container">
            <canvas id="myChart" width="500" height="500"></canvas>
        </div>

        <div class="right-info">
            <h4>Iowa State vs Iowa</h4>
            <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
            <div class="total-points-live">
                <h5>Total Points Bet</h5>
                <h5 id="point-total">20,000</h5>
                <p class="bet-button">Click To Place Bet</p>
            </div>
        </div>
        <div>
            <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
        </div>
    </div>
    <div class="game-cards col-lg-5">
        <div class="chart-container">
            <canvas id="myChart" width="500" height="500"></canvas>
        </div>

        <div class="right-info">
            <h4>Iowa State vs Iowa</h4>
            <h5 id="time-channel">11:00 AM - Channel Goes here</h5>
            <div class="total-points-live">
                <h5>Total Points Bet</h5>
                <h5 id="point-total">20,000</h5>
                <p class="bet-button">Click To Place Bet</p>
            </div>
        </div>
        <div>
            <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount">
        </div>
    </div>

This is the Javascript

window.onload = function () {
        var ctx = document.getElementById("myChart").getContext('2d');

        var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Iowa", "Iowa State"],
            datasets: [{
              backgroundColor: [
                "#CC0000",
                "#F1BE48",
              ],
              data: [2000, 9000]
            }]
          },
          options: {
                responsive: true
            ,   maintainAspectRatio: false
          }
        });
    }

Answer 1

Don't use the same id for multiple elements. id must be unique !

In your example, change them to different ids - maybe firstChart and secondChart:

 window.onload = function() { var ctx = document.getElementById("firstChart").getContext('2d'); var firstChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Iowa", "Iowa State"], datasets: [{ backgroundColor: [ "#CC0000", "#F1BE48", ], data: [2000, 9000] }] }, options: { responsive: true, maintainAspectRatio: false } }); var ctx2 = document.getElementById("secondChart").getContext('2d'); var secondChart = new Chart(ctx2, { type: 'doughnut', data: { labels: ["Iowa", "Iowa State"], datasets: [{ backgroundColor: [ "#CC0000", "#F1BE48", ], data: [2000, 9000] }] }, options: { responsive: true, maintainAspectRatio: false } }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> <div class="game-cards col-lg-5"> <div class="chart-container"> <canvas id="firstChart" width="500" height="500"></canvas> </div> <div class="right-info"> <h4>Iowa State vs Iowa</h4> <h5 id="time-channel">11:00 AM - Channel Goes here</h5> <div class="total-points-live"> <h5>Total Points Bet</h5> <h5 id="point-total">20,000</h5> <p class="bet-button">Click To Place Bet</p> </div> </div> <div> <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> </div> </div> <div class="game-cards col-lg-5"> <div class="chart-container"> <canvas id="secondChart" width="500" height="500"></canvas> </div> <div class="right-info"> <h4>Iowa State vs Iowa</h4> <h5 id="time-channel">11:00 AM - Channel Goes here</h5> <div class="total-points-live"> <h5>Total Points Bet</h5> <h5 id="point-total">20,000</h5> <p class="bet-button">Click To Place Bet</p> </div> </div> <div> <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> </div> </div> 

Or - if you don't need a reference to each chart because you don't want to change them later - use the same class for all charts:

 window.onload = function() { var charts = document.getElementsByClassName("piechart"); for (chart of charts) { var ctx = chart.getContext('2d'); new Chart(ctx, { type: 'doughnut', data: { labels: ["Iowa", "Iowa State"], datasets: [{ backgroundColor: [ "#CC0000", "#F1BE48", ], data: [2000, 9000] }] }, options: { responsive: true, maintainAspectRatio: false } }); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> <div class="game-cards col-lg-5"> <div class="chart-container"> <canvas id="firstChart" class="piechart" width="500" height="500"></canvas> </div> <div class="right-info"> <h4>Iowa State vs Iowa</h4> <h5 id="time-channel">11:00 AM - Channel Goes here</h5> <div class="total-points-live"> <h5>Total Points Bet</h5> <h5 id="point-total">20,000</h5> <p class="bet-button">Click To Place Bet</p> </div> </div> <div> <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> </div> </div> <div class="game-cards col-lg-5"> <div class="chart-container"> <canvas id="secondChart" class="piechart" width="500" height="500"></canvas> </div> <div class="right-info"> <h4>Iowa State vs Iowa</h4> <h5 id="time-channel">11:00 AM - Channel Goes here</h5> <div class="total-points-live"> <h5>Total Points Bet</h5> <h5 id="point-total">20,000</h5> <p class="bet-button">Click To Place Bet</p> </div> </div> <div> <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> </div> </div> 

Answer 2

You need to switch ids with classes or make your ids unique

Maybe use id="myChart" for first, and id="myChart2" for second, yet you will need to create another function to target the second chart.

You could switch ids with classes and target them both via Javascript, thats if both charts share same options.

var ctx = document.getElementsByClassName("myChart").getContext('2d');