Issue displaying Chart in panel set in conditionally rendered tab set

Oh come on.  I love the chart behind the calendar.  That is epic! 

What we think is happening is that the conditional render of the tabset does not fire the “tab show” event.  When they are hidden, charts take all the available space they can (because they are not yet constrained by a container)  Then when we expose them inside a container they need to be resized.  One event that forces the resize is the  “tab show” event.  You can test this by going back and forth between the tabs (which fires the tab show event). This should force the first tab’s charts to resize themselves. 

What you can do is add another event to your “Show Chart” action sequence that publishes a “tabshow” event.   (Or you can add this within a snippet if you are going that route).   The Charts are listening to this event and should resize appropriately. 

We have been talking for a while about implementing a better fix for this situation. 

Here’s what happens when switching to other and back.

Then I mouse over the chart to get this.

It looks like you found a bug in our chart code. The center text in the donut does not automaticaly repaint when the chart repaints.  We are going to have to fix that in the chart code. 

Your customer may not be amenable to this idea, but if you default the chart to show on page load, it will show correctly and the user can turn it off.  Not so with the other model (default to not show and let user turn it on). 

Another solution that we are confident works is to put the charts in a popup.