Chartjs-Vue Chart.js doesn't get initialized in Vue Tab

by

3👍

✅

After searching through documentation, I’ve discovered that the reason of the problem lies within Chart.js itself — if the parent element containing the chart has display: none or is hidden in some other ways, the canvas rendered in it gets the height and width properties equal to 0. This may be avoided if during chart instance’s initialization pass to its options the following parameters:

options: {
    // other options
    responsive: false,
    maintainAspectRatio: true
}

Then the canvas element bound to the chart instance would keep width and height properties passed to it in markup (i.e. <canvas id="myChart" width="1137" height: "447"></canvas>) and it’s display property will remain with the value of block even if the parent element is hidden.

1👍

This worked for me.
Put the code inside mounted hook.

var canvas = document.getElementById('line-chart');

canvas.removeAttribute('width');
canvas.removeAttribute('height');
canvas.setAttribute('style',  'display: block; width: 100% !important; height: auto !important;');

Leave a comment