Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Chart does not resize when its container gets resized
See original GitHub issueDescription
When the width of the DOM element a chart is bound to changes, the chart’s width should also change to utilize the space available in its container. E.g. this causes the chart to overflow when the container shrinks.
In below example the container has a solid border. Expanding the right hand side drawer pushes the main content to the right causing the container to shrink. The chart should be responsively adapting to the new width of its container.
Steps to check or reproduce
- generate a chart to a
<div>element (container) - decrease the width of the container (either manually or by any other means other than resizing the browser window which does trigger resizing the chart)
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Charts will not resize with container - Stack Overflow
When the nav panel is hidden and displays the whole page the container resizes but the charts do not. If I put them...
Read more >Charts do not resize properly when using a Flex or Grid layout
chart ). In this case, call the render method when the browser is not resized but the container element is resized.
Read more >Charts not staying inside resizable containers. - EJ 2 Forums
Hi,. I am using Sync fusion chart component inside a react component that allows the user to resize the container that it is...
Read more >Manage Resizable Apps in App Designer - MATLAB & Simulink
For example, if axes or charts use a value of 'normalized' for the Units property and are parented to a container with the...
Read more >Resizing an SVG When the Window is Resized in d3.js - Chartio
The browser doesn't inherently associate a width or height with an SVG ... nor will it be able to resize the SVG even...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks @porfirioribeiro for sharing!
A ResizeObserver could be used for this https://developers.google.com/web/updates/2016/10/resizeobserver But it’s implementation is still low https://caniuse.com/#feat=resizeobserver There is a polyfill tough, maybe it can be used. https://www.npmjs.com/package/resize-observer-polyfill