# Plotly graph not showing when loaded in tabs

**URL:** <https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236>\
**Category:** plotly.js\
**Created:** [May 16, 2017, 3:03pm UTC](https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236 "2017-05-16T15:03:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hanskisj](https://avatars.discourse-cdn.com/v4/letter/h/7c8e57/32.png) [@hanskisj](https://community.plotly.com/u/hanskisj)\
**Post date:** [May 16, 2017, 3:03pm UTC](https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236/1 "2017-05-16T15:03:11Z")

</div>

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/](https://jsfiddle.net/leblanchannah/277p6Lwn/)

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [May 16, 2017, 3:32pm UTC](https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236/2 "2017-05-16T15:32:23Z")

</div>

> [@hanskisj](#):
>
> When I load the page I cannot see the first graph.

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

---

<div class="post-metadata">

**Author:** ![hanskisj](https://avatars.discourse-cdn.com/v4/letter/h/7c8e57/32.png) [@hanskisj](https://community.plotly.com/u/hanskisj)\
**Post date:** [May 16, 2017, 3:42pm UTC](https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236/3 "2017-05-16T15:42:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [May 16, 2017, 4:15pm UTC](https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236/4 "2017-05-16T16:15:32Z")

</div>

> [@hanskisj](#):
>
> I think for the resizing I need to call the resize function each time I click on a tab.

Yes, that would be safer.

---

<div class="post-metadata">

**Author:** ![MediumToast](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@MediumToast](https://community.plotly.com/u/MediumToast)\
**Post date:** [April 16, 2020, 2:38am UTC](https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236/5 "2020-04-16T02:38:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mdileepkumar](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mdileepkumar/32/10715_2.png) [@mdileepkumar](https://community.plotly.com/u/mdileepkumar)\
**Post date:** [May 9, 2020, 3:50pm UTC](https://community.plotly.com/t/plotly-graph-not-showing-when-loaded-in-tabs/4236/6 "2020-05-09T15:50:58Z")

</div>

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

```auto
  $('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