Bootstrap 3 tabs & Chart.js - charts not loading on tabs

Question

I'm using Bootstrap 3 tabs for a page layouts and Chart.js to create donut graphs for a project.

However the charts do not load when changing to a tab with a chart on it. Sometimes they load when you start inspecting elements in google chrome though. They only seem to render if they are loaded on the first visible tab.

There is one known error with the chart.js javascript in the chrome console:

Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.

And I think this is because Bootstrap has the tabs visibility set to none and therefore the chart doesn't render properly or something...

It should be looking like this:

Has anyone else had this problem & if so; is there a workaround?

... Or should I look for another charting script that will play nicely with Bootstrap tabs.

Thank you in advance :)

Answer 1

Since the origin of this problem is display none of tab-content in bootstrap I've solved this with a little css hack.

.tab-content>.tab-pane {
    display: block;
    height: 0;
    overflow: hidden;
}
.tab-content>.tab-pane.active {
    height: auto;
}

Answer 2

I have had this problem. If I remember correctly I solved it by calling the chart js render when the active tab is shown using shown.bs.tab (http://getbootstrap.com/javascript/#tabs) i.e.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  //call chart to render here
});

Hope that helps.