Plotly graph not showing when loaded in tabs

plotly.js
1

I am trying to display three tabs, each with a unique graph in their content divs. When I load the page I cannot see the first graph. Although I can’t see the graph, the content div for that tab changes to the size of a plotly graph and my mouse changes when I hover over it. To make the plot show I have to switch to another tab and then back to tab A. If I’m on tab b and I resize the page, when I go back to tab A it doesn’t respond to the resize.

https://jsfiddle.net/leblanchannah/277p6Lwn/

2

Removing that fade class from <div id="a"> makes the graph visible on load. To what CSS props is that class linked to?

3

Thanks! .fade comes from bootstrap I think, I don’t really need my tabs to fade in and out so that’s easy to remove. I think for the resizing I need to call the resize function each time I click on a tab. Otherwise my graph get squished to the left side.

4

Yes, that would be safer.

5

Apologies for replying to such an old thread.

I’m experiencing a very similar issue with my graphs getting squished to the left side. I’ve tried using Plotly.relayout() to “refresh” the graph when a tab is selected but it hasn’t helped.

What is the “resize” function you are referring to?

6

Redrawing the plotly graph making size to responsive whenever tab change. I have written function to generate Plotly graph.

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   
  var target = $(e.target).attr("href") // activated tab
 if(target=="#tab2")
 {
        //call the corresponding function which generates that plot
 }
});

Hope this helps