Okay, so I have a custom extension built for me that analyzes stuff and posts the net total results on the front page.

I kind of mickey mouse'd things in a roundabout way by using the Custom CSS Header section to create a chart.js line graph with the following code (the InnerText is always a number):

<script>


window.addEventListener('load', (event) => {

var noob = document.getElementsByClassName("score-result")[0].innerText;
var coob = document.getElementsByClassName("score-result")[1].innerText;
var voob = document.getElementsByClassName("score-result")[2].innerText;



var data1 = {
    labels: ["Economy", "Real Estate", "Credit Scores"],
    datasets: [{
        label: 'Score',
        data: [noob, coob, voob],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
       borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
      
        borderWidth: 1
    }]
};
var options = {
           responsive: true,
            datasetStrokeWidth : 3,
            pointDotStrokeWidth : 4,
          
    maintainAspectRatio: false,
     // scales: {
     //        xAxes: [{
     //            type: 'linear',
     //            position: 'bottom'
     //        }]
     //    }
};

var ctx1 = document.getElementById("myLineChart").getContext("2d");


var lineChart = new Chart(ctx1, {

    type: 'line',
    data: data1,
    options: options,

    
});

});
</script>

I realize this could probably be achieved in .js file using the attributes, but for some reason I like doing things the hard/inefficient way. Anyway, after the slow and painful process of the chart rendering after everything on the page loads (I've also used a setTimeout function and should probably be using ajax), everything looks fine. But when the hash or the page changes (clicking on a post, for instance), I use the back button and the chart disappears. Only a full page load achieves the rendering and I've eliminated a common issue dealing with resizing and aspect ratio as the cause. Only thing I've hard coded in the js file is the canvas or chart div itself, nothing else. I've tried m.redraw...to no avail. Just to note: I am hosting Chart.min.js on my server.

Now with the LoadingIndicator issue. I have to write this directly into the compiled js file....when I place ,(this.loading = 1), right before the hard-coded canvas, it just shows the loading indicator and doesn't load the chart anymore. How do I stop the animation and load the canvas?

Any insight would be appreciated. Thank you.