ChartJs not Rendering

Question

So I am trying to render a chart inside of a bootstrap popover and it doesn't seem to be rendering. I have tried every possible thing to debug, but I can't quite figure out what's wrong. So any help would be greatly appreciated. Below is my html code:

<div id="popover-content" style="display: none;">
      {%include 'scroll_card.html'%}
    </div>

note: I am using jinja to render my html code which contains the graph that I would like to show in my popover. Below is what's in the scroll_card.html file

  <div class='summary'><h5 class='header'> Chart </h5>
        <div class="chart" style="height: 400px;">
        <canvas id='hourly-chart' width="300" height="400">Hello</canvas></div>
    </div>

And my js code:

document.addEventListener('DOMContentLoaded', function() {
const myPopoverTrigger = document.getElementById('popover');
let hourChart =null;
const instance = new mdb.Popover(myPopoverTrigger, {
    title:"Hourly Forecast",
    sanitize:false,
    html:true,
    content: function(){
        popContent = document.querySelector('#popover-content').innerHTML;
        return popContent;
    }
    
});


myPopoverTrigger.addEventListener('show.mdb.popover', () => {
    const ctxHour = document.getElementById('hourly-chart').getContext('2d');
    console.log(ctxHour);
    if (hourChart) {
            hourChart.destroy();
        }
hourChart = new Chart(ctxHour, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        responsive: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    
    });
    console.log(hourChart);
});
    myPopoverTrigger.addEventListener('hide.mdb.popover', () => {
        if (hourChart) {
            hourChart.destroy();
        }

    });
});

Another Note: when I use my console.log the chart (hourChart), it returns a chart object in the console which gives some weird attributes, like in the options, it returned x and y as undefined. Could I be doing something wrong or missing something?

Thanks

Edit:

So here is my console when I do console.log(hourChart).

Answer 1

The HTML content should be provided directly in the option. Otherwise it's not being added to the DOM in time for the canvas/chart to render.

const instance = new mdb.Popover(myPopoverTrigger, {
        title: "Hourly Forecast",
        sanitize: false,
        html: true,
        content: `<div id="popover-content">
                <div class='summary'>
                    <h5 class='header'> Chart </h5>
                    <div class="chart" style="height: 400px; width: 600px;">
                        <canvas id='hourly-chart' width="600" height="400"></canvas>
                    </div>
                </div>
            </div>`

    });

Demo: https://codeply.com/p/uxPMnF28ET