0

I have a page with several Visual Composer tabs and a few donut charts within those tabs. The charts on the active tab will appear but charts on other tabs do not appear when you click through. All charts have been shown to work if there tab is active when page is loaded.

I get a console error:

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

Is there a jquery way to say when a tab is clicked, to treat it like a page load or whatever would get the chart to realize it should load/draw.

Here is a quick test page on the site if that helps: http://sga.churchgrowth.org/test-sga-results/

I'm a total jquery novice so if you can please spell it out for me.

Tiffany Israel
  • 460
  • 1
  • 7
  • 22
  • I'm not familiar with tabs in wordpress, but you need to make sure that your chart.js chart is not created until the tab is active because the canvas object within the hidden tabs will have 0 visibility and therefore not render. Or as an alternate, if you are creating all your charts at page load then you just need to call the `.update()` prototype method on the chart when it's tab becomes active. – jordanwillis Mar 27 '17 at 17:39
  • Depending on how the tabs are implemented, you can could bind a click event to the tab div in jQuery using the [`.click()`](https://api.jquery.com/click/) function, but this may not work (it all depends on your tab component). Most tab components have some sort of event they emit when a tab is clicked. For example, [bootstrap3 tabs](http://getbootstrap.com/javascript/#tabs) emit a `show.bs.tab` event that you can use jQuery to define a handler for. – jordanwillis Mar 27 '17 at 17:42

0 Answers0