search

brammitch / recharts-to-png

Create images from HTML elements
https://recharts-to-png.netlify.app/
MIT License
38 stars 4 forks source link

Composed Charts #4

Closed john-rock closed 3 years ago

john-rock commented 3 years ago

Hello, are composed charts supported?

I have a bar and line graph inside a composed chart. After following the directions, it will only download an empty png.

brammitch commented 3 years ago

It has been working fine for me with composed charts: Example. Chart 2 is a <ComposedChart>.

Sandbox

If you have a reproduction of the issue or can share your code, I'd be happy to reopen this issue and take a look at it.

john-rock commented 3 years ago

Hi there, thanks for the response.

The link below is the component I am using the download feature on. The code in question starts on line 70. Feel free to clone and see the behavior there.

https://github.com/john-rock/benfords-law/blob/download-chart/src/components/Chart.js

brammitch commented 3 years ago

Thanks for the repo. I'm not getting an empty png, but I think there may be some browser compatibility issues. Something is causing half of the png to be cut off in Chrome/Edge.

Here's the download in Chrome 86: chrome_86

Here it is is Edge 86: edge_86

And here's what it looks like in Firefox 78.4esr: firefox_78-4esr

I noticed you are using <ResponsiveContainer>, so I updated my Codesandbox in https://github.com/brammitch/recharts-to-png/issues/4#issuecomment-724848962 to use it as well, and it still works fine.

I'd dig into your styles/css to see if you can find out what is causing the issue, or you can pass in a y-offset to see if you can move the image into place, like so:

const pngData = await getPngData(chart, {
      y: 500
    });
john-rock commented 3 years ago

Interesting, thanks for the quick response again.

I'll poke around and follow up with my findings.

john-rock commented 3 years ago

I ended up getting this to work correctly by moving the ref from the chart component and on to the container div as well as using the y offset option.

The downloaded chart is now viewing correct across all browsers.

brammitch commented 3 years ago

Awesome. Glad you were able to get it working!