Chart.js canvas, how can I swap data without the previous data affecting my hover events?

Question

Using chart.js I have built some bar graphs. I swap out the data to show different graphs on clicks. Loading the page shows everything fine.

<div id="chart-container">
  <button class="dataSelector" onclick="dataSwap('webDevData')">WebDev Tools</button>
  <button class="dataSelector" onclick="dataSwap('graphicsData')">Graphic Design Tools</button>
  <div class="chart-window">
    <canvas id="myChart"></canvas>
  </div>
</div>

Upon loading the page, the chart is initialized and the chart object is created and rendered properly. Upon calling my swapData function the other data set is renderd correctly, but thereafter the old data-set still responds to hovering the mouse over the chart.

My function looks like this.

<script type="text/javascript">

//set both sets of data in variables

var lablesWebDev = ["CSS", "JAVASCRIPT", "PYTHON", "PHP", "RUBY", "SQL", "PERL"];
var dataWebDev = [3.5, 3.5, 1, 1.5, 0.5, 1, 0.5];
var lablesGraphic = ["Photoshop", "Illustrator", "GIMP", "BLENDER", "FreeCAD", "Photography"];
var dataGraphic = [1.5, 1.1, 2.5, 2.0, 0.8, 3.0];


function dataSwap(dataType){

//check argument for which data set to render

  if (dataType == "webDev"){
    var labelsChosen = lablesWebDev;
    var dataChosen = dataWebDev;
  }else if (dataType == "graphic"){
    var labelsChosen = lablesGraphic;
    var dataChosen = dataGraphic;
  }

//grab the canvas and initialize the chart following documentation.

Chart.defaults.global.defaultFontColor = 'black';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {                    //variables placed below
        labels: labelsChosen,
        datasets: [{
            label: 'Years Experience',
            data: dataChosen,
            backgroundColor: 'rgba(255, 50, 80, 0.5)',
            borderColor: 'rgba(255, 50, 80, 1)',
            borderWidth: 1
         }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
}dataSwap("webDev");
</script>

How do you reinitialize this Chart Object so that the previouos data set no longer exists? Or at the very least how can I disable hover events so that I just bypass this issue completely?

Thanks for the wisdom!

Answer 1

There is an option to clear a chart by .clear() method. This will clear the existing chart. There is also an option .destroy() to destroy the chart.

//This would destroy the chart.
    var mychart = new Chart(xyaz, myNinjaConfig);
    mychart.destroy();


//This would clear. the chart.
    const mychart = new Chart (xyaz, myNinjaConfig);
    mychart.clear();

Answer 2

You could change your options to only listen for the click event:

    options: {
        events: ['click'],
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
    }

This will only change the display when you click within it.

Answer 3

I couldn't access any methods by declaring myChart as a var or const. In the end I found that by declaring

this.myChartInstance = new Chart(ctx, { ... //WORKS!!
var myChartInstance = new Chart(ctx, { ... //doesnt work
const myChartInstance = new Chart(ctx, { ... //doesnt work

I could now call destroy method from the console.

Adding a conditional check before re-initializing my data, works great!! I can hover over my graph and swap data without any conflict. Solution:

if (this.myChartInstance) {
    this.myChartInstance.destroy();
}
this.myChartInstance = new Chart(ctx, { ...