search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.29k stars 1.15k forks source link

Chart not resized when container is resized #474

Open maxencefrenette opened 7 years ago

maxencefrenette commented 7 years ago

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

One could argue that this could be considered a feature, but I think it should be treated as a bug.

Current behavior

Currently, a chart that is set to fit the container's size will only resize itself when the window.resize event gets triggered.

Expected behavior

It should resize itself even when only the container changes size, but the window isn't resized

Reproduction of the problem

It's pretty obvious from the code itself: https://github.com/swimlane/ngx-charts/blob/f9cc928a0fe51c48a32045c490c15d6bc75f6fd0/src/common/base-chart.component.ts#L140

What is the motivation / use case for changing the behavior?

Sometimes, other things that a window resize can trigger a container resize

Please tell us about your environment:

markmssd commented 7 years ago

Facing the same issue!

markmssd commented 6 years ago

Tried to fix it but wasn't able to... anyone had a chance at it?

marjan-georgiev commented 6 years ago

The reason we don't have this is that HTML elements do not emit resize events that we can bind to, so there are no events we can bind to. We could run check the container size on an interval, but that would be heavy on the performance, so it's less than ideal.

I assume you have the chart in an angular component that can be resized, and probably emits those events, so I would suggest binding to them and triggering the chart update in the aplication itself.

To trigger the update, just change the reference on any property. Example, if your data is called results, you can do this in your resize event listener: this.results = [...this.results] which will trigger the chart update and resize.

marjan-georgiev commented 6 years ago

Alternatively, we can probably use the ResizeObserver API https://wicg.github.io/ResizeObserver/ It still seems to be in draft, but some browsers already support it and there are polyfills for it. We would need to evaluate how it will affect performance.

on3dd commented 1 month ago

+1, this is very annoying to deal with