

I am not sure how to go about implementing this in Angular but hope this might shed some light on ways you might go about achieving the same result.

This allows the flexible container to resize down to your new height and the chart to fill the contents of the resized flexible container. A workaround in React is to remove the chart element from the page entirely, and place it back immediately afterwards.

Subsequently, an onResize() event won't fire because the parent container will maintain the height/width values from when the chart was expanded to it's largest state, and therefor the graph will remain the same size.Īgain I am coming from React but believe this issue lies with CSS Grid/CSS Flexbox not respecting the max-height/max-width parameters. But when I reduce the size of my window, my container (whose height/width is specified in fr units) will not respect my max-height: 100% min-height: 100% rules. I have a container that is set with max-height: 100% max-width: 100% width: 100% height: 100% and as the container grows, my chart expands to fill the extra space. I am using React, but have been running into this issue too and think this must be a compatibility issue with CSS Grid/CSS Flexbox.
