Nivo: [Canvas components] allow to get the canvas

Created on 29 Mar 2020  路  10Comments  路  Source: plouc/nivo

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

canvas

Most helpful comment

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 :)

All 10 comments

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

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

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

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

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

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

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

+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

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 :)

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pratikguru picture pratikguru  路  3Comments

danpettay picture danpettay  路  3Comments

gcloeval picture gcloeval  路  3Comments

luisrudge picture luisrudge  路  3Comments

vagnervst picture vagnervst  路  4Comments