✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

toImage with drawn shapes


I am using plotly-js (react) to add circles to an image.

However, when I get the base64 image with toImage, these circles are not visible.
How can I get the image including the newly drawn circles?

For reference, here’s the code I am using right now, based on this helpful comment from @will-moore

Plotly.plot('graph', fig.data, fig.layout).then((gd) => {
            return Plotly.toImage(gd);
        }).then((dataURI) => {

layout.shapes contains the shapes I drawed.



I don’t know about drawing shapes in Plotly, but in the example, the <Plot> component has to be rendered with the same data and layout that you provide to Plotly.plot.

If there’s anything that the user draws on the <Plot> after it’s first rendered, that won’t be included in the data and layout that you initially used to render it.

In my case, I wanted to preserver the user’s changes to the selected points on the <Plot>, and also changes to the axes, so that I could pass those changes to the Plotly.toImage.
I did this by responding to update and selection changes:


In handleUpdate and onSelected, I update the state of data and layout so that I can pass these to Plotly.plot('graph', data, layout).
I think you’ll need to figure out the same approach with drawing of shapes.