Chart reflow on container dimension change instead of window resize

[Bartozzz]

Related to #6707.

Description of the feature

Right now, charts gets reflowed on window resize. Because of that, there's no automatic reflow on layout shifts. It would be nice to get reflow on changes to the dimensions of a chart's container instead.

Library related to the feature

Highcharts

Proof of Concept/Live example for the feature

Instead of listening for window resize here:

highcharts/ts/Core/Chart/Chart.ts

Lines 1815 to 1847 in 561e76d

	public setReflow(reflow?: boolean): void {
	const chart = this;
	if (reflow !== false && !this.unbindReflow) {
	this.unbindReflow = addEvent(win, 'resize', function (
	e: Event
	): void {
	// a removed event listener still runs in Edge and IE if the
	// listener was removed while the event runs, so check if the
	// chart is not destroyed (#11609)
	if (chart.options) {
	chart.reflow(e);
	}
	});
	addEvent(this, 'destroy', this.unbindReflow);
	} else if (reflow === false && this.unbindReflow) {
	// Unbind and unset
	this.unbindReflow = this.unbindReflow();
	}
	// The following will add listeners to re-fit the chart before and after
	// printing (#2284). However it only works in WebKit. Should have worked
	// in Firefox, but not supported in IE.
	/*
	if (win.matchMedia) {
	win.matchMedia('print').addListener(function reflow() {
	chart.reflow();
	});
	}
	//*/
	}

We could use a ResizeObserver and listen for dimensions changes of the chart.renderTo element.

---

You can vote for this feature by adding a thumbs-up reaction to this post.

[karolkolodziej]

Hi @Bartozzz!
Thank you for sharing your thoughts!

A similar idea has already been discussed and tested here: #6427 (comment)
Demo: https://jsfiddle.net/BlackLabel/tadcn975/

From what I can see, right now it is widely supported through multiple browsers.
Perhaps it is the right time to revisit this idea @TorsteinHonsi?

[TorsteinHonsi]

Perhaps it is the right time to revisit this idea @TorsteinHonsi?

Absolutely @karolkolodziej! Will you have a go?

[sszczep]

Stumbled upon the same issue. Would be great to have it fixed.

[Groszekk]

I'm struggling with it as well...

[Bartozzz]

Hey @karolkolodziej, this fix is quite important for us – when can we expect this feature to roll out? Is there an ETA? If not – what is the recommended hotfix? Should we use Highcharts.wrap(Highcharts.Chart.prototype, 'setReflow', …) or set-up a resize observer ourselves and call chart.reflow() in the callback?

[karolkolodziej]

@Bartozzz There are some cavities of this solution that we have to discuss before proceeding with that fix and unfortunately there is no ETA for now.
For now, I would use chart.reflow() until we fully discover and test the observer.