search

JesperLekland / react-native-svg-charts

📈 One library to rule all charts for React Native 📊
MIT License
2.34k stars 398 forks source link

Using Chart to Generate an Image File #455

Open purplegamba opened 4 years ago

purplegamba commented 4 years ago

I'm working on an app using a rather complex chart, generated using react-native-svg-charts. I want to use the chart to generate an image file (such as a png or jpg) which the user can share on social media. I can do this with a screenshot, but the trick is that I would like the generated image file to be quite a bit bigger (esp. wider) than it is displayed on the screen. I don't want to have to render the chart first in a bigger size (it doesn't fit on a phone screen and therefore looks strange, and also rendering is slow).

Any suggestions of how to go about this would be much appreciated. Thanks for reading!

garrettg123 commented 4 years ago

I'd imagine saving it as an SVG would enable you to scale it indefinitely: https://github.com/react-native-community/react-native-svg/issues/212#issuecomment-544118823

I believe that same issue has an example to save to PNG/PDF as well.

purplegamba commented 4 years ago

I'd imagine saving it as an SVG would enable you to scale it indefinitely

Thanks for replying! I don't just want to scale it though. My chart renders differently depending on the width - for example, if there isn't enough horizontal space in each bar to draw the xAxis label, it omits some of them to avoid overlapping. I want the image created to be wider than the screen to that all the axis labels can be displayed.

garrettg123 commented 4 years ago

I see. I think this is more related to the RN SVG issue linked earlier since that’s the underlying library and what gets rendered.

On Fri, Apr 3, 2020 at 10:08 PM purplegamba notifications@github.com wrote:

I'd imagine saving it as an SVG would enable you to scale it indefinitely

Thanks for replying! I don't just want to scale it though. My chart renders differently depending on the width - for example, if there isn't enough horizontal space in each bar to draw the xAxis label, it omits some of them to avoid overlapping. I want the image created to be wider than the screen to that all the axis labels can be displayed.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/JesperLekland/react-native-svg-charts/issues/455#issuecomment-608955863, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJJT3RYORGABWMRATCBUSDRK2JDPANCNFSM4L4M2W5A .

-- Garrett