Curious question: Is there a specific reason why Legend API is not in the svg space?

[GasimGasimzada]

All the charts are in SVG space and legend shapes are already rendered in SVG space. I am curious why the rest of the Legend components are not compatible with it or don't have an option to use <g> instead of div (i.e LegendItem).

[williaster]

Hey @GasimGasimzada 👋 gonna convert this to a discussion since it's not an issue. Good question tho, we decided that HTML was preferred to SVG for @visx/legend, @visx/tooltip, and now an HTML variant of @visx/annotation because laying out text in SVG is realllllly hard. @visx/text abstracts some of the complexities but HTML allows us to leverage things like flexbox or text wrapping for free.

#67 is the OG PR where it was added if you're curious

[JoeVanGundy]

Hey @williaster

I'm currently generating visualizations on a node server that I can use for emailed reports.
I'm actually using the method you recommended for this here: #1274 (comment)

Do you have any recommendations on how we can include the legend in an exported image?
Since the legend can't be in the svg, it won't be rendered in the image.
Would we just have to try to convert the component to a jpg or something similar?

[GasimGasimzada]

@JoeVanGundy I never tried to convert SVG to png before but there is a way to embed the HTML inside the SVG using foreignObject as long as you can set the width and height for it.

[GasimGasimzada]

Thank you for the information!