toImage with drawn shapes

plotly.js
1

Hi,

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

image
image742×762 54 KB

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) => {
            setFigureImage(dataURI);
        });

layout.shapes contains the shapes I drawed.

Best,

Sine

2

Hi,
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:

<Plot
    data={data}
    layout={layout}
    onUpdate={handleUpdate}
    onSelected={onSelected}
/>

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.

Will.