@vx/responsive withParentSize height issue

[gkunthara]

Fairly new to React, (first time writing an issue on github) but am really like vx so far. I am having issues with responsive height for my graph. I have set up parentHeight and parentWidth the exact same way as outlined from examples. When running my program, the width of my graph is perfectly responsive to the size of the browser screen. However, I am getting some really weird numbers for parentHeight which constantly increases even when the height of the browser screen stays the same.

Any ideas of the problem? Source.

[hshoff]

Hi @gkunthara, thanks for checking out vx!

Looks like the chart's height is being calculated based on parentWidth * aspectRatio https://github.com/gkunthara/Ethereum-Chart/blob/master/src/App.js#L82. This would mean your height would change even though the parentHeight has not changed. Could try changing height to be parentHeight * aspectRatio and tune the aspect ratio value to something you're happy with.

Let me know if that doesn't fix it, happy to take a closer look.

[gkunthara]

Thanks for the response.

I changed parentHeight to be parentWidth * aspectRatio. (saw this on a different vx project that seemed to work fine). I've changed it back to height = parentHeight here where I am having the issue stated above. If you can, please take a look and let me know if I am doing something wrong.

Appreciate the help!

[williaster]

@gkunthara I was able to get your code to work by specifying a height on the chart container, see index.html here.

Without some type of height set on the parent container, the parentHeight will likely be 0 which I believe is what you're seeing (as the parent div will simply be the height of its contents which begin as 0).

[hshoff]

Hi @gkunthara, just checking in on this, were you able to get this sorted out?

[gkunthara]

Yes, @williaster's solution worked for me! Thanks!