ngx-charts: Resize bug on Resize
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 When I resize my window / tab in any way, the bars within the chart (Using Vertical Bar) grow in size. This prompts the entire chart to grow in size, and no matter how many times I do it this never stops leading to an insane size.
Expected behavior They would retain the same size or shrink to fit the window. Tested with and without flex-shrink, yet this seems to have 0 effect.
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment: Windows 10, https and Visual Studio Code.
-
ngx-charts version: x.x.x Latest Version
-
Angular version: 2.x.x Angular 5
-
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Chrome
-
Language: [all | TypeScript X.X | ES6/7 | ES5] Angular 5s
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 8
- Comments: 20 (6 by maintainers)
this is still an issue, whenever I resize the window the bar graph just keeps growing!, and if I set a max-height in the graph, the legends below overflow the container of the graph.
@marjan-georgiev I am using bootstrap and maybe I set up incorrectly, but I have the problem too. I made an example here :
Just play with the resize or the console, and it will grow.
https://stackblitz.com/edit/swimlane-stacked-horizontal-bar-chart-ax7bpg
Even when removing in above stackblizz demo the wrapper, the container, and the card stuff and placing the ngx-chart solely inside a div with padding 0, the bug persists.
This issue should be re-opened.
Hi, I’m also experiencing this issue as well. I have made a minimal stackblitz that reproduces the issue. If you keep toggling the minimize/maximize button on the browser (on Chrome at least) the graph continues to grow, it doesn’t seem to happen in the editor window though. Hope this helps!
Link to app Link to editor
@MichaelLazarevic just a though and not sure what your markup looks like but if you have a number of nested div or other containers it’s possible you are overriding some style props unintentionally. I would test it with a simple implementation outside your current implementation if you haven’t already using @marjan-georgiev directions and see if that works, then refactor accordingly to simplify your markup. I personally have seen a couple of hard to debug issues like this using flexbox and it was due to nesting and style overrides.
This happens if the container around the charts has a padding. Is that the case? If so, just add another div around the chart with 0 padding and width and height set to 100%.