React react-plotly.js toImage functionality

plotly.js
1

I am trying to export the graph to png programmatically, and as part of the standard plotly.js there is the toImage function referenced here: https://plot.ly/javascript/plotlyjs-function-reference/#plotlytoimage

I am importing import Plot from "react-plotly.js" and I am using it like so.

        <Plot
          data={[
            {
              x: this.state.data.x,
              y: this.state.data.y,
              type: "scatter",
              size: 1,
              mode: "markers",
              marker: { color: "red" }
            }
          ]}
          layout={{
            showlegend: false,
            autosize: true,
            margin: { t: 0, r: 0, b: 0, l: 0 }
          }}
          style={{ width: "100%", height: "100%", maxHeight: "30vh" }}
        />

My question is how can I call the toImage function from a react component like this? I read about const Plot = createPlotlyComponent(Plotly); which suggests that I can create a custom Plot object, but that doesn’t seem to expose a toImagefunction (and in that case, i’m not sure where Plotly should come from.

Any help greatly appreciated.

I know this is against general forum rules, so apologies for asking multiple questions in advance, if I also want to programmatically add more plots, I think I need to append to the data object array, but again, I cant find how to do that programmatically either?

2

No one knows how I can export as an image programmatically in a react environment? I really thought this would be pretty standard

3

This seems to be working for me as follows:

import React from "react";
import Plot from 'react-plotly.js';

import * as Plotly from 'plotly.js';

const PlotWrapper = ({ data, layout }) => {

    // after we've rendered (so that the 'graph' element exists)
    // e.g. click handler
    Plotly.plot('graph', data, layout).then((gd) => {
        return Plotly.toImage(gd);
    }).then((dataURI) => {
        console.log(dataURI);
    });

    return (
        <div>
            <Plot
                data={data}
                layout={layout}
            />
            <div id="graph" style={{ display: "none" }}></div>
        </div>
    );
}
4

I tried to use the solution that @will-moore used, but I get the following error when my component renders:
“plotly_js__WEBPACK_IMPORTED_MODULE_0__.plot is not a function”

Does anyone know how to solve this?

5

If it helps (version numbers, more complete example etc) my code for this is at https://github.com/will-moore/parade-crossfilter/blob/master/src/plots/Plot.js

But I’m not actively working on it right now.

6

I finished this work with the following command:

import * as Plotly from "plotly.js";

Plotly.newPlot("graph", data, layout)
      .then(async (gd) => {
        await Plotly.downloadImage(gd, { format: "png" });
      })
      .then((dataURI) => {
        console.log(dataURI);
      });


return (
        <div>
            <Plot
                data={data}
                layout={layout}
            />
            <div id="graph" style={{ display: "none" }}></div>
        </div>
    );