Dynamic page content not loading when using JS to fetch and apply innerHTML on div

I have a simple dashboard with a side navigation. The nav options are just list items with an onclick JS function attached.

 *'PHP code to dynamically build the nav from an array*
 <?php
 foreach ($nav as $navitem) {
 if($navitem[2]==1){
 echo "<li onclick='" . $navitem[3] . "' class='sidebar-item pt-2' style='cursor:pointer;'>";
 echo "<a class='sidebar-link waves-effect waves-dark sidebar-link' aria-expanded='false'>\r\n";
 echo "<i class='" . $navitem[1] . "' aria-hidden='true'></i>\r\n";
 echo "<span class='hide-menu'>" . $navitem[0] . "</span></a>\r\n";
 }
 }  
 ?>

When an option is clicked, the relevant function grabs the content for whichever page has been clicked and loads it into the pagebody div.

 *//JS Function to load dashboard*
 function navLoadDashboard(){
 fetch("pages/dashboard.php" /*, options */)
.then((response) => response.text())
.then((html) => {
    document.getElementById("pagebody").innerHTML = html;
})
}

The dashboard content itself has some charts on there using chartis. The charts load fine and work correctly when loaded directly, however when the page content is fetched using JS and set as innerHTML for the pagebody div the charts do not load data but instead show a blank canvas.

I'm not generating any errors or showing anything on console. I've also got all the relevant plugins etc declared right on index, so i'm not missing anything there.

Can anyone point me in the right direction to get this working?