Search code examples
javascriptlaravelchart.jslaravel-livewire

Chart JS update transition - zoomed in blurry chart

I'm doing what I think is a pretty standard destroy() and recreation of a chart using Chart.js. The chart updates as expected but I see a strange zoomed-in, blurry chart during the transition. I can't seem to get rid of it.

Also, I'm using Laravel Livewire. Not sure if that's causing this.

Any ideas?

let existingChart = Chart.getChart('chart');
if (existingChart !== undefined) {
    existingChart.destroy();
}
let c = new Chart(document.getElementById('chart'), {
...

See video: https://imgur.com/a/qRhd4el

Solution

  • Adding wire:ignore to the canvas element fixed the issue.