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


i'm using bootstrap 3 tabs page layouts , chart.js create donut graphs project.

however charts not load when changing tab chart on it. load when start inspecting elements in google chrome though. seem render if loaded on first visible tab.

there 1 known error chart.js javascript in chrome console:

uncaught indexsizeerror: failed execute 'arc' on 'canvasrenderingcontext2d': radius provided (-0.5) negative.

and think because bootstrap has tabs visibility set none , therefore chart doesn't render or something...

it should looking this:

enter image description here

has else had problem & if so; there workaround?

... or should charting script play nicely bootstrap tabs.

thank in advance :)

i have had problem. if remember correctly solved calling chart js render when active tab 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 render here }); 

hope helps.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -