I want to display a heatmap showing yearly data, each year on a separate tab (similar to github user activity heatmap).
The first heatmap which is for the current year renders properly but for the second tab (which is initially not visible and becomes visible when the user clicks on the tab) I only get the legend and no heatmap. On the console I get an error message : Uncaught ax.dtick error: Infinity
Here’s the call stack:
I know it has something to do with the tab not being visible at the time the page is rendering for the first time. I tried plotting the heatmap on a separate div on the page that was visible and I get multiple heatmaps as expected.
Is there any workaround for this? For the tabs I’m using Bootstrap with vertical pills as documented here: