# Breakpoints in plotly.js?

**URL:** https://community.plotly.com/t/breakpoints-in-plotly-js/3593
**Category:** plotly.js
**Created:** [March 9, 2017, 3:33am UTC](https://community.plotly.com/t/breakpoints-in-plotly-js/3593 "2017-03-09T03:33:24Z")
**Posts on this page:** 5
**Page:** 1

<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 9, 2017, 3:33am UTC](https://community.plotly.com/t/breakpoints-in-plotly-js/3593/1 "2017-03-09T03:33:24Z")

</div>

I started creating breakpoints in the workspace for different size browser windows. The breakpoints (frames) show up in the plotly.js code export but aren’t working on my site when I use the sample HTML template and the javascript code. The breakpoints do work when I embed the plot hosted by plotly in an iframe.

Are frames functional in plotly.js? Is there anything else I need to do for them to work?

EDIT: The plot in question is [https://plot.ly/~schivlg/70](https://plot.ly/~schivlg/70)

---

<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: [March 9, 2017, 4:03pm UTC](https://community.plotly.com/t/breakpoints-in-plotly-js/3593/2 "2017-03-09T16:03:45Z")

</div>

> Are frames functional in plotly.js?

Not at the moment. We’re keeping breakpoints as a cloud-only feature while we iron-out the API.

> [@schivlg](#):
>
> Is there anything else I need to do for them to work?

In pseudo-code:

```js
// define breakpoints as set of `relayout` or `restyle` update objects

window.onresize = function() {
  var ww = window.innerWidth
  var wh = window.innerHeight

  // find breakpoint that corresponds to new window width, height

  Plotly.restyle('graph', restyleObject)

  // or
  Plotly.relayout('graph', relayoutObject)

  // or even
  Plotly.update('graph', restyleObject, relayoutObject)
}

```

---

<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 13, 2017, 6:26pm UTC](https://community.plotly.com/t/breakpoints-in-plotly-js/3593/3 "2017-03-13T18:26:08Z")

</div>

Thanks. Launching a website in a couple weeks and don’t think I’ll have time to get this implemented before then, but it’s good to know.

---

<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 15, 2017, 4:57pm UTC](https://community.plotly.com/t/breakpoints-in-plotly-js/3593/4 "2017-03-15T16:57:33Z")

</div>

I’ve created a [code pen](https://codepen.io/gschivley/pen/aJyaqE) that resizes and changes the layout according to the window width. But while it changes the layout to the Frame, it won’t change back to the normal layout when the window is resized up. Any ideas?

---

<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 15, 2017, 6:35pm UTC](https://community.plotly.com/t/breakpoints-in-plotly-js/3593/5 "2017-03-15T18:35:07Z")

</div>

I was able to get everything working by creating another frame that replicates the “default” layout.