How to make plot resize based on event in webpage containing plot div

I have a plotly.js plot inside a parent div on a webpage. If I resize the window the plot resizes to fit in it’s parent div. If I run jquery to to change the size of the parent div using css(when you click the parent it goes full screen), the plot doesn’t update until the window size is changed again. How can I make the plot size change whenever it’s parent div size changes instead of just when the window size changes? I have seen a couple examples on this forum that are close, but I can’t get them to work… Thank you so much!

Sorry for the late response!

I just worked on this today, here is my solution. I just wanted my div to resize vertically only:

css:

#plotly-plot {
   resize: vertical;
   overflow: hidden;
}

html:

 <div id='plotly-plot'></div>

JS:

function onPlotlyPlotLoaded() { 
   // code/functions to be executed when plot is fully loaded
   console.log('Plotly plot is fully loaded');
   addObserver();
}

...

//your plot initial generation may differ, doesn't really matter
script.onload = function () { 
    var config = {responsive: true}
    //the .then here is a callback to the function after it is done loading. 
    Plotly.newPlot('plotly-plot', plotData.data, plotData.layout, {responsive:true, }).then(onPlotlyPlotLoaded);
};


...


let resizeTimeout;

function addObserver() {
    let observer = new ResizeObserver(function(mutations) {
        console.log('Resized:', mutations);

        // clear any existing timeout
        clearTimeout(resizeTimeout);

        // set a new timeout to trigger Plotly.update after resizing stops
        resizeTimeout = setTimeout(function() {
        console.log('Resizing stopped, updating layout to new height: ', plotlyPlot.clientHeight, "px tall");
        console.log('Resizing stopped, updating layout to new width: ', plotlyPlot.clientWidth, "px wide");
        // Update the layout of the existing Plotly plot
        Plotly.update('plotly-plot', {}, { height: plotlyPlot.clientHeight, width: plotlyPlot.clientWidth  });
        }, 500); //  timeout duration, change as needed

    });

    let plotlyPlot = document.querySelector('#plotly-plot');
    observer.observe(plotlyPlot, { attributes: true });

}

A little about this. I have a lot of this in a function triggered by the newPlot callback because I was having issues with my plot not being loaded immediately before variable declaration. I’m not a js pro, there are probably better ways to do this.

Additionally, I needed the timeout within the mutationobserver, because otherwise the code would try to resize the plot every moment the div was being resized, which was obv resource intensive. Now it waits half a second after the last resize before triggering a plot update w new sizing.

How this works: we set a resizeobserver on the plot-containing div, and allow it to be resized (w css). If the observer sees a resize, it waits half a sec until after the user stops resizing, then updates the plot with the new div sizing.

It really feels like a lot of code for something pretty simple, but this accomplishes two things:

  1. The plot remains responsive to browser window size changes.
  2. The plot is also responsive to resizing just the div but keeping the window the same, so a user can change the plot’s aspect ratio (to get a larger view or whatever).

I’m open to hearing if anyone has a better way?

Blake