Nice to support a responsive mode.

[alshan]

From discussion: #897 (comment)

I've noticed that plots created with lets-plot do not currently support a responsive mode. This slightly cripples UX, because I am generating the plots in a web app, and it's being accessed by users on various devices, making the fixed width and height of plots inconvenient!

Are there any plans to introduce responsiveness to the plots (similar to width/height policy in Bokeh)?

[alshan]

Hi @OSuwaidi,
Agree, this is nice to have.
Speaking of width/height policy in Bokeh, which one would be most applicable in your case?

[OSuwaidi]

Hey @alshan,

So excited for this feature to be supported honestly!

And I'd say supporting responsive width is most important; width_policy="fit" is especially powerful, so is having sizing_mode='stretch/scale_width'.

[alshan]

But AFAIU you need to fit both, width and height (and width with a slight discount BTW):
LetsPlot.buildPlotFromRawSpecs(data._plot_spec_as_dict, pn_container.clientWidth-5, height, pn_container);

See holoviz/panel#5475 (comment)

[OSuwaidi]

I see.

Well, assuming the plot's container element (pn_container) is responsive, can we observe changes in its size via ResizeObserver by targeting its ID (document.getElementById('pn_container')), and then invoke a callback to dynamically update the plot's dimensions given the new container size?

(P.S., small pet peeve: why the use of & rather than && in if (state.height-5<=height & height<=state.height+5)?)

[alshan]

HI @OSuwaidi ,
I've added something that would potentially allow you to make lets-plot chart reactive in your app.
At least it works in my sandbox: https://codepen.io/Igor-Alshannikov/pen/PogPPYJ

When in the sandbox, II recommend you to "collapse" var plotSpec=... code-block because it takes a lot of space and doesn't contain anything interesting:

1, LetsPlot.buildPlotFromRawSpecs() now returns a figure model object:

var figureModel = LetsPlot.buildPlotFromRawSpecs(

Note, it is possible that the figureModel object will be Undefined, i.e. in case of an error during the plot building etc.

2. buildPlotFromRawSpecs() now have 5th parameter. You can use it to set-up the sizing policy as follows:

{
    "sizing": {
           "width_mode": "fit",
           "height_mode": "fit",
           "width_margin": 50,
           "height_margin": 0
         }
}  

The width_margin value is yours of course. The height_margin is optional as it is 0 by default.

3. The figure model has method updateView() which you can invoke in your app to apply the sizing policy after plot container size changes.

---

In the sandbox you can change size of the plot container in the "CSS" panel, then press the "Refresh Plot" button to apply the sizing policy.

I hope this will work for your app.