Black Lives Matter. Please consider donating to Black Girls Code today.

Uncaught ax.dtick error: Infinity for heatmap

Hello everyone,

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:
plotlyerror

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:

Thanks!

Would you please create a minimal demo e.g. by changing this codepen to illustrate the potential bug?

Tried this:

but couldn’t replicate the issue. It’s working as expected on codepen.

On my case I solved it by just handling tab activated event and plotting the graph on click.