Vue-chartjs: Chart doesn't load in bootstrap tab

[mwei0210]

Expected Behavior

Charts in both active and inactive tab to load

Actual Behavior

Only chart in active tab load but not the inactive tab

[apertureless]

Please provide a codepen or jsfiddle for reproduction.

[mwei0210]

See if this is sufficed,

Chart in the first tab-1 works but when i switch to tab-2, the chart doesn't show at all. Thanks

[apertureless]

Hey, I need a working example to debug it.

Are you using a vue-bootstrap lib? Or pure bootstrap?

[mwei0210]

Its on pure bootstrap. May need sometime setting the reproduction up..

[apertureless]

You can easy load it in codepen just add the bootstrap files the vue-chartjs cdn and you can start.
Check out the https://codepen.io/apertureless/pen/vxWbqB?editors=1010

[mwei0210]

Try navigating between tabs, only tab 1 is loaded and other tabs won't.
https://codepen.io/mwei0210/pen/ayvoyO
Thanks

[apertureless]

Thanks for this!

Well, the problem is, how chartjs works if you pass responsive: true.
What responsive: true does, it so set the width and height of the chart, based on the outer div.

In your example it's the tab-pane . However, because of the tabs, only the active tab has a height and width, as the other hidden tabs are set to display: none so their height and width is 0.

But the vue chart component gets loaded and chartjs sets the chart height and width to 0.
If you now click on the second tab, the class sets it to display: block However the chart can't detect that change.

There are two possible solutions for you.

1. You set responsive: false and may set an fix width and height. This way you will see the charts if you change the tabs.

2. You use a vue based tabbar. This whay you could add a v-if to the chart and only mount it if the tab is open, so chart.js can detect the width and height of the outer div.

[mwei0210]

Got it! Thanks!