How to export React-Plotly as an image, and change its background?

plotly.js
1

I’m working with React-Plotly, and I’m trying to figure out how to export toImage, similar to the static export. I noticed in the React-Plotly docs that a onBeforeExport and onAfterExport event are emitted, but I can’t seem to figure out how to export the view of a Plotly component. If using download image in the modebar is the only way to do this, there aren’t any event handlers for downloading, like onBeforeDownload or onAfterDownload.

In addition to exporting the plot as a png, I’m trying to also change the background color during the export process. The plot is currently transparent, but I’m trying to give it a white background in the exported version.

Any help would be greatly appreciated!

1 Like
2

I ended up here from a web search today, before realizing I’d cobbled together a solution months ago here:

import('plotly.js')
    .then(m => m.default)
    .then(
        Plotly => Plotly.downloadImage(
            figure,
            {
                width: graphDiv.offsetWidth,
                height: graphDiv.offsetHeight,
                filename: "plot-fallback",
                format: "png",
            }
        )
    )
    .then(img => console.log('downloaded img:', img))

Leaving that here in case it’s helpful!

1 Like