Is there a way to save a chart or graph to png

[EdanToledo]

The title pretty much says it all. Is there a way to save a chart without using react refs as this is legacy or will be in the future

[williaster]

Hey @EdanToledo 👋 thanks for checking out visx. Currently visx itself doesn't support this functionality.

However at Airbnb we've explored something similar using the svg-to-img npm package. Basically you'd render your svg-based chart with visx/React, then use ReactDOM to render the component to an HTML string.

From there you should be able to generate the png from the the string using the svg-to-img lib. It's been a while since I've done this so I might have forgotten something, but I think that's the gist of the approach. Curious to hear if it's successful for you!

[EdanToledo]

i cant seem to get it working but i'll let you know if i achieve success

[JeremieBou]

I couldn't quite get the ReactDOM approach working, but I just got this rough version working using the save-svg-as-png package:

saveSvgAsPng(document.getElementsByTagName('svg')[0], 'chart.png', {
        backgroundColor: '#FFFFFF',
});

I'd still like to eventually get the ReactDOM approach working if anyone figured that out.

[williaster]

curious which @visx packages you all are trying to use here. I don't think the svg-to-img approach will work with @visx/xychart as it relies on useEffect currently (which is not invoked on the server)

[JeremieBou]

I've been playing around with axis, curve, group, legend, responsive, scale, shape, and tooltip, so not sure if those have anything like that. For responsive I was using ParentSize, which seems to also rely on a useEffect, so I might try this again on a non-responsive version when I get back to it.

legend was a bit weird to export using my method if you pursue it. I had to put it in a <foreignObject> in the <svg>, and the styling wasn't kept on export (lost the colored squares I had and the font was different), which probably just needs a bit more tweaking.