The charts are just resizing it when the window or the viewport change.

[JulioWar]

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

Current behavior The charts are just resizing it when the window or the viewport change.

Expected behavior Resize the chart when the parent container change, if the chart doesn't have the property view defined.

Reproduction of the problem this is a reproduction: https://plnkr.co/edit/eikmlKcVM9vLTbzTQTNs?p=preview. As you can see in the view I put a button to refresh the with of the container but the graph doesn't resize unless you resize the preview.

What is the motivation / use case for changing the behavior? I'm want to implement the charts in a layout where I have a sidebar that you can toggle, so if the sidebar is hidden then the main container take his place.

Please tell us about your environment:

@angular/cli: 1.0.0
node: 6.11.2
os: win32 x64
@angular/animations: 4.4.3
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.0.0
@angular/compiler-cli: 4.4.3

• ngx-charts version: ^7.0.0

• Angular version: ^4.0.0

[Daskus1]

Same problem... Is there a workaround?

[Adondriel]

Same here, I want my charts to take up the full width/height, after changing window size they go all funky. I'll see if I can find a work around. There is something REALLY buggy going on, if you resize the window, width seems fine, but height goes CRAZY. My height is at 342,825px atm... This seems to stem from having multiple charts on one page, but then now that I remove the other 2 charts, the 1 chart isn't actually taking up the area... it's very odd.

[Adondriel]

It looks like this framework doesn't work well, if you want the charts to shrink/scale, with the page... for some reason they went hard on the hard-coded px values.

[Adondriel]

Yea, resize issue goes away if I get rid of the other charts, my guess is they are re-using an instance of a component or something, rather than re-instancing it. aside from that, you basically have to make a div with the right settings in order for the chart to listen... lemme see if I can find a way. Not only does it not re-draw the graph, it doesn't even bind the "view" property, so if you change it, there seems to be no way to update the graph size, without reloading the page, somehow... I may just use a diff framework...

[JulioWar]

Maybe we can try to trigger the window resize event like is discribed here: https://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript

[JulioWar]

It work for me, So now I'm firing the event when the user show or hide the sidebar.

[phanf]

@JulioWar I was able to work around the resize issue with the following code as suggested. ngAfterViewInit(): void { setTimeout(_ => { window.dispatchEvent(new Event('resize')); }); // BUGFIX: }

[crm86]

Is this the only possible solution?

[annndrey]

@crm86 here's another solution with a wrapping div & min and max heights:

https://github.com/swimlane/ngx-charts/issues/755#issuecomment-1674019455

[AhsanAyaz]

still facing the issue. but on mobile view where all my charts are supposed to fit the container. Unless containers have a fixed max-height, the charts keep on growing.