Chart.js - Mouseover causes graphs to flicker and resize

Question

To start, I have made a short video to show exactly what I'm running into.

To summarize the video: while using Chart.js (2.6.0), I can create my charts without issue; but when I mouse-over the bars/points, the chart will resize its elements and flicker. The weird thing is that it's totally inconsistent. Sometimes when I refresh, it doesn't have this behaviour at all; but if I hover over something and it starts doing it, it won't stop until I refresh again or close out of the tab (it is inconsistent with this, also). I don't change anything in the code when this occurs, it does this all on its own.

In an attempt to fix it, I've referenced many other threads here on SO, as well as the Chart.js documentation. Among my solutions: I have made a point to add in a specified Height/Width to the Divs & Canvas creating the graphs; Set the Animation duration to 0, the Hover Animation duration to 0, and the Responsive Animation duration to 0; I've ensured that Responsive is set to true, and have kept Maintain Aspect Ratio as true, changed the tooltip mode... I've tried all of these, among other little things that seem to have little-to-no effect.

I'm stumped!

Here is one of my charts' code (without how I'm grabbing the JSON data etc, just the Chart):

new Chart($("#runwayChart"), {
    type: "horizontalBar",
    data: {
        labels: runwayLabels,
        datasets: [{
            label: "Months Left", fill: true,
            backgroundColor: "#3333ff",
            borderColor: "#3333ff",
            data: score
        }, {
            label: "Expenses",
            fill: true,
            backgroundColor: "#aa2222",
            borderColor: "#aa2222",
            data: expenses
        }, {
            label: "Revenue",
            fill: true,
            backgroundColor: "#2222aa",
            borderColor: "#2222aa",
            data: revenues
        }]
    },
    options: {
        tooltips: {
            mode: 'index'
        },
        responsive: true,
        maintainAspectRatio: true,
        animation: {
            duration: 0,
        },
        hover: {
            animationDuration: 0,
        },
        responsiveAnimationDuration: 0
    }
});

I'd appreciate any help you all may have!

Thanks =)

Answer 1

I see that it has been a while since somebody wrote an answer to this post. I solved my flickering issue by applying two things.

First one When I declare the chart I use:

var ctx = document.getElementById('chart').getContext('2d'); window.chart = new Chart(ctx, {}) ...

rather than var chart = new Chart(ctx, {})..

In this way, we make sure that the chart has been appended to the window. object.

Secondly

Before drawing the new diagram (For example for data update) we need to make sure that the previous canvas has been destroyed. And we can check that with the code below:

if(window.chart && window.chart !== null){ window.chart.destroy(); }

Answer 2

It was actually a really simple, and odd solution.

When the data point was near the top of the chart, the chart would try to resize depending on the div. As the chart lived in a larger canvas, putting inside its own div solved this issue.

<div>
    <canvas id="chart"></canvas>
</div>

Formatting it like this was the solution =)