Chart does not resize/not responsive when parent container is resized

[dez1729]

Seems the responsiveness only applies when the browser is resized, but not if the container is resize (say using angular-split or resize under material component etc), so the chart will not resize unless manually trigger the browser resize event in code. Is there any way to listen for resize event within a container?

[andrefarzat]

@dez1729 I believe you're looking to something like this: https://www.npmjs.com/package/@thalesrc/resize-manager
It watches an element and triggers an event (rxjs' observable) once the width/height of the element changes

A library using it: https://www.npmjs.com/package/@thalesrc/ng-utils#user-content-resize

[dez1729]

I've done just that actually (with built in event from the component I was using), and in my subscription call "window.dispatchEvent(new Event('resize'))" I got from another thread. However, this produces a noticeable lag. Is there a native call that the chart would respond directly instead of being triggered a round-about way.

[andrefarzat]

you could use the PlotlyService to get the plotly instance and to trigger the redraw there. Like this:

    constructor(public plotlyService: PlotlyService) {}

    this.resizeService.observe(this.el.nativeElement).subscribe(async ({width, height}) => {
            const plotly = await this.plotlyService.getPlotly();

            /** Here you have the plotly object from plotly.js */
            /** ... */
    });

Then you can use the functions from plotly.js such as react and restyle to update the graph.
Reference: https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle

[erwinpenner]

@dez1729 Same problem here:
I'm using plotly inside a drawer-content. When toggeling the sidenav, everything reacts responsive, as expected, except for the plotly-chart.
It only resizes, when the whole browser window gets resized.

[mohitchauhan4u]

"window.dispatchEvent(new Event('resize'))"

"window.dispatchEvent(new Event('resize'))"

Just write this statement in the function which opens the side panel for you or resizes parent container for you.
Plotly js will automatically resize itself.