# Responsive plotly.js was working, now it is not

**URL:** <https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451>\
**Category:** plotly.js\
**Created:** [January 31, 2016, 6:05pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451 "2016-01-31T18:05:33Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexpetralia](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@alexpetralia](https://community.plotly.com/u/alexpetralia)\
**Post date:** [January 31, 2016, 6:05pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/1 "2016-01-31T18:05:33Z")

</div>

About a week ago, I had some responsive plotly.js plots working and now they are not - I’m not sure if I changed something or if plotly.js was updated. I did read the post about including the d3 var explicitly, which I’ve now added to my app. However, it’s still not responsive.

Here’s the relevant code (assume `data` and `layout` are filled in):

```auto
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 80,
    HEIGHT_IN_PERCENT_OF_PARENT = 50;
var gd3 = d3.select("div[id='Green Line E_reveal']")
    .style({
        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
        'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
        height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
        'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
    });
var Green_Line_E = gd3.node();
Plotly.plot(Green_Line_E, data, layout, {showLink: false});
window.onresize = function() { Plotly.Plots.resize( Green_Line_E ); };

```

Am I missing something? This looks to me like it mimics the example at [https://plot.ly/javascript/responsive-fluid-layout/](https://plot.ly/javascript/responsive-fluid-layout/).

The graphs show successfully and the Javascript console shows no runtime errors - it’s strictly the resizing where nothing occurs. I suspect it’s something with the last line of code (specifically, `Plotly.Plots.resize()`). I also tried using the recent solution of `relayout` to no avail (after wrapping it on a `window.onresize` function). You can view the full source code [here](http://mbta.live/).

Any help would be hugely appreciated. Thanks a lot.

---

<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:** [February 1, 2016, 3:01pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/2 "2016-02-01T15:01:03Z")

</div>

@alexpetralia Thanks for writing in.

Your code is not _missing_ anything, but rather has too many conflicting things.

Setting `window.resize` multiple times does not add as many on-resize handlers, but instead it overrides them, keeping only the last handler set active. In your case the last `window.onresize` statement resizes the blue line graph, which does behave responsively as intended.

To add multiple handlers to the same event, you’ll have to use to [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) method instead. For example,

```auto
window.addEventListener('resize', function() { Plotly.Plots.resize('blue_line'); });
window.addEventListener('resize', function() { Plotly.Plots.resize('red_line'); });

// ... and so on

```

---

<div class="post-metadata">

**Author:** ![alexpetralia](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@alexpetralia](https://community.plotly.com/u/alexpetralia)\
**Post date:** [February 1, 2016, 3:25pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/3 "2016-02-01T15:25:14Z")

</div>

Etienne, thank you so much, it worked! I hope this post can help someone else from making the same silly mistake in the future. Thank you for helping out so quickly.

---

<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:** [February 1, 2016, 3:37pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/4 "2016-02-01T15:37:44Z")

</div>

No problem.

Your app looks slick. Looking forward to seeing the final version.

---

<div class="post-metadata">

**Author:** ![schivlg](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@schivlg](https://community.plotly.com/u/schivlg)\
**Post date:** [March 16, 2017, 2:23pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/5 "2017-03-16T14:23:08Z")

</div>

In case anyone else needs some clarification on this, you’ll need to use `window.addEventListener` _instead_ of `window.onresize`. Took me a couple tries to get this working. I was able to get both ‘resize’ and ‘relayout’ working within the EventListener for multiple plots on a single page.

---

<div class="post-metadata">

**Author:** ![kausti](https://avatars.discourse-cdn.com/v4/letter/k/b19c9b/32.png) [@kausti](https://community.plotly.com/u/kausti)\
**Post date:** [October 10, 2017, 12:16pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/6 "2017-10-10T12:16:21Z")

</div>

Anyone’s got this to work in a react component?  
I tried this code in componentDidMount() but didn’t make any difference.

For now I am using this terrible hack

```
if(window.innerWidth < 800){
			layout.width = 470
		} else if(window.innerWidth < 1000){
			layout.width = 750
		} else layout.width = 900

```

It is not responsive but on initial load the chart figures out the correct width.  
I would love to see a proper solution

---

<div class="post-metadata">

**Author:** ![kausti](https://avatars.discourse-cdn.com/v4/letter/k/b19c9b/32.png) [@kausti](https://community.plotly.com/u/kausti)\
**Post date:** [October 16, 2017, 11:56am UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/7 "2017-10-16T11:56:07Z")

</div>

I finally got this working in react.  
I understand this is not totally relevant to plotlyjs but still posting the answer here.  
This is quite to difficult to figure out for someone relatively new to javascript. Hopefully, it will save someone else a lot of time. This is what worked for me.

In componentDidMount()

```
const el = document.getElementById('aiplot')
PlotlyCore.newPlot(el, traces, layout, defaultPlotlyConfiguration)
window.addEventListener('resize', function() { PlotlyCore.relayout(el, {width: el.getBoundingClientRect().width, height: el.getBoundingClientRect().height}) })

```

And then in componentWillUnmount()

```
componentWillUnmount() {
    const el = document.getElementById('aiplot')
   window.removeEventListener('resize', function() { PlotlyCore.relayout(el, {width: el.getBoundingClientRect().width, height: el.getBoundingClientRect().height}) })
}

```

That’s it! None of d3 selectors and IIFEs necessary.  
It’s working like a charm but if anyone spots a bug, please let me know.  
Cheers!

---

<div class="post-metadata">

**Author:** ![Zolotoy](https://avatars.discourse-cdn.com/v4/letter/z/6bbea6/32.png) [@Zolotoy](https://community.plotly.com/u/Zolotoy)\
**Post date:** [February 10, 2018, 10:52pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/8 "2018-02-10T22:52:13Z")

</div>

So, what’s a bottom line? Is it responsive? What if I dont want to specify a percentage of the parent? I just want my chart taking all available space any time I resize.

Thanks

---

<div class="post-metadata">

**Author:** ![Rooibostee](https://avatars.discourse-cdn.com/v4/letter/r/5daacb/32.png) [@Rooibostee](https://community.plotly.com/u/Rooibostee)\
**Post date:** [May 15, 2018, 1:16am UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/9 "2018-05-15T01:16:20Z")

</div>

I made an account just to thank you for this.  
Indeed it’s not trivial, but with your comment it worked within minutes for my Angular app:

The HTML:

> ```
> <div #chart></div>
> 
> ```

The element ref:

> @ViewChild(‘chart’) el:ElementRef;

The Resize Listener:

> ```
> @HostListener('window:resize', ['$eent'])
> onResize(event) {
> Plotly.Plots.resize(
> this.el.nativeElement,
> {
> width: this.el.nativeElement.getBoundingClientRect().width,
> height: this.el.nativeElement.getBoundingClientRect().height
> });
> 
> ```
> 
> }

---

<div class="post-metadata">

**Author:** ![slfan2013](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@slfan2013](https://community.plotly.com/u/slfan2013)\
**Post date:** [June 5, 2018, 3:09pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/10 "2018-06-05T15:09:30Z")

</div>

> [@etienne](#):
>
> blue\_line

Hi, etienne, I am trying to resize multiple plots on the same page. I think this post about “addEventListener” will do the work.

However, I don’t understand what is the ‘blue\_line’ in the `resize` function is. Is it a `gd3.node()` or the `id` of the `<div>` in html?

Thanks.

---

<div class="post-metadata">

**Author:** ![stahlmanDesign](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/stahlmandesign/32/9248_2.png) [@stahlmanDesign](https://community.plotly.com/u/stahlmanDesign)\
**Post date:** [January 31, 2020, 10:11pm UTC](https://community.plotly.com/t/responsive-plotly-js-was-working-now-it-is-not/451/11 "2020-01-31T22:11:26Z")

</div>

Thanks kausti, your solution got me on the right track.

For React in 2020, we can use React.CreateRef() instead of looking up the dom element by ID. We don’t have to import PlotlyCore or call PlotlyCore.relayout at all.

Here’s how I did it in a component:

> **[react-plotly-responsive - CodeSandbox](https://codesandbox.io/embed/jovial-visvesvaraya-pbnqj?fontsize=14&hidenavigation=1&theme=dark)**
>
> react-plotly-responsive by stahlmanDesign using create-react-app, plotly.js, react, react-dom, react-plotly.js, react-scripts

[https://pbnqj.csb.app](https://pbnqj.csb.app)