Displaying charts in tabs or other dynamic page elements

Lots of amCharts users who develop interactive JavaScript applications require placing the charts in containers that are not initially visible. I.e. tabs. This creates a problem since chart cannot reliably determine dimensions of the hidden container. The solution is quite an easy though. Once you make chart container make sure you call invalidateSize() on your chart object:

chart.invalidateSize();

That’s it. And just to get you started here’s an interactive demo using jQuery UI tabs.

Posted in Uncategorized