eatyourpeas
commented
1 month ago @dmc-cambric apologies to you and David for being slow to get this.
I wonder before we merge this in, if you might be happy to take a look at the PR above also? Scaling SVGs is more complicated than I thought it would be, because although we can easily change the chart size, scaling all the SVG elements within the chart is not so easy. I have come up with a solution which seems to work for me locally well enough, both in storybook and when linked to a local instance of the our client. But see what you think - I am happy to tweak.
Also I have fixed I hope your issue with <RCPCHChart/> overriding the rest of the DOM.
Displaying the Centile Chart on a larger screen results in the chart's SVG size capping out at 1000w x 800h, and not scaling beyond that to use available space.
Example from our implementation:
Potential source of the problem is the hardcoded width and height params passed into the Victory Chart component:
https://github.com/rcpch/digital-growth-charts-react-component-library/blob/5c6b367e8f682936ff5be2217c05c0f8222f9428/src/CentileChart/CentileChart.tsx#L280
Experimenting locally (by manually modifying the svg params), found that increasing the width and height values but maintaining the aspect ratio appears to fix the issue (i.e. 3000w x 2400h).