[Canvas components] allow to get the canvas

[oorestisime]

Is your feature request related to a problem? Please describe. The problem is to export graphs into png

Describe the solution you'd like A neat way to export canvas is to use toDataURL web api of canvas. To do this I need to be able to access the canvas. The solutions i am seeing are:

• allow users to use ref and forward it to canvas.
• if this is not possible because of how refs are used internally then provide a function getCanvas that gives back the current canvas ref
• worst solution, allow user to add an id tag that will be then able to query using document.getElementById

Describe alternatives you've considered Haven't considered but open to suggestions

Additional context I am willing to do the changes myself via a PR, just interested in knowing what an acceptable solution is to you so i don't do this in vein :)

And if you arrived here, thanks for maintaining this awesome library

[Gwillison415]

+1 My Outfit is considering this library based on criteria like export/download features. There is a related response that speaks to this also

[plouc]

@oorestisime, thank you for willing to contribute, and sorry for the late reply, I guess forwardRef could work to get the canvas.

[oorestisime]

Awesome thanks! i ll have some time later this week to work on this!

[aselawijesinghe]

@oorestisime were you able to work on this idea? It seems to be a much needed functionality for me as well.

[oorestisime]

Unfortunately no, covid happened lol. i plan to get to it but can't commit to when. But feel free to do this if you need it asap. that said if your timetable is before end of summer i ll probably do it before :D

[shadiramadan]

@aselawijesinghe @oorestisime Did either of you get to this?

[oorestisime]

Nope sorry still couldn't make time for this. go ahead :)

[wjes]

+1 I'm also in the need for this functionality to insert the image into a PDF, sadly I'm too new to React to implement the solution

[bobylito]

Hi everybody,

I'm working with the Orbit team (@phacks and @dzello) on this topic. Thanks to the earlier discussion, I have something working already for the Line chart (see https://github.com/orbit-love/nivo/commit/8bd3a7e92f9c9ac91f7623054bdc3757af796651)

I'd like your feedback on the solution:

• am I doing something too much with the refs? 😅
• do you think there is a way to generalize the solution to all the charts? (I'm OK with custom code everywhere too)

Right now we don't need charts beyond the lines and bars, does it make sense to provide this feature to all canvas based components? Would a PR with only the lines and bars be accepted?

Thanks for your time :)

[wyze]

Right now we don't need charts beyond the lines and bars, does it make sense to provide this feature to all canvas based components?

Yes, we would want it to be consistent.

Would a PR with only the lines and bars be accepted?

Yes.

If the solution you linked to works, we can open a separate umbrella issue to update the rest of the canvas components throughout the library with the same functionality.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!