Using modeBarButtonsToAdd in plotly.react

plotly.js
1

Hi all,

I am trying to add the sendDataToCloud button to the modeBarButtons

I gather it use to be in there by default and was then removed so I have seen a few questions similar to this but the difference hear is I am asking about the react.js version of plotly.

I have a simple plot tag that my react script builds and I am not sure how to add the modeBarButtonsToAdd part

Here is my react.js tag, could anyone show me how and where to add the modeBarButtonsToAdd = [‘sendDataToCloud’] I am getting mixed up trying to use double {{ or double [[ but couldn’t get anything to work

return (
<Plot
data={list_of_data_dictionaries}
layout={{
xaxis: {
title: x_axis_title,
type: props.x_axis_scale,
exponentformat:“power”
},
yaxis: {
title: y_axis_title,
type: props.y_axis_scale
},
margin: {
r: 0,
t: 1,
pad: 1
},
showlegend: true,
legend: {
x: 0.7,
y: 0.9
}
}}
/>
);

2

This has been solved using a separate js file for plotly, this also had the nice side effect of reducing the js bundle size

var Plotly = require(“plotly.js/lib/core”);
Plotly.setPlotConfig({
showSendToCloud: true
});
module.exports = Plotly;

:slight_smile: