I am working on a chart component in react that goes into a grid with responsive elements (panels that can open from the left depending on user choice- and should push the chart, shrinking it in size so it may fit). The top parent layout is a grid with 2 columns, having a condition such as `${certainCondition} ? '0px 1fr' : '300px 1fr'. The column that the graph is in has its own grid that breaks down into lines.
In my case i attempt to keep my chart in the same height while changing the width depending on the top parent grid column size (the 1fr size). The issue i come across is that the chart will enlarge accordingly (stretching the bars to the appropriate width) - whenever i start with the panel open and then close it, or just start with a smaller window viewport size and then enlarge it. But when i try and shrink the viewport size / open the side panel after the chart has rendered - it just wont budge, no matter what i did. Any ideas on what the problem might be? Scoured the net and your forums for over a day but couldn't find any solution to it.
I tried to change every width property i can come across in the code / inspecting the page. Nothing seemed to have any affect on the chart - seems like it receives a hard coded width number and rolls with it, only changing when it increments but never going down.
Thanks in advance and have a great day, Gavriel.