Breakpoints in plotly.js?

plotly.js
1

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

2

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.

In pseudo-code:

// 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)
}
3

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.

4

I’ve created a code pen 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?

5

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

1 Like