Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

Toggling Plotly editable: true/false?

I am having a hard time setting up an HTML button which will toggle the plot in and out of editable mode. Is this at all possible?

I have parameter {editable: var_boolean} set-up, and a function for onclick the value changes. What’s the Plotly.update, Plotly.relayout, etc. type command needed to change the graph to editable mode, and back off again?

Thanks for the help.

Try:

var gd = document.getElementById('graph')
Plotly.plot(gd, [], {}, { editable: !gd._context.editable })

Unfortunately I can’t get it to work.

Any tips? Thank you very much for helping me!

This http://codepen.io/etpinard/pen/xqNjme?editors=0010 is working for me. Can you confirm?

Interesting, that does work!

I anticipated the rest of the settings like zoomScroll to fail if only {editable} is passed into Plotly.plot

Thank you very much for the help etienne.

1 Like

Good point here. Updating config options isn’t well-defined in our API at the moment. My solution is a slight hack. That’s why it never made it in our documentation pages. Maybe we should a top level function (e.g. Plotly.updateConfig) to do just that?

You definitely keep your config settings relatively secret, which are extremely useful. Being able to edit annotations, and zooming around in the graph adds some major mark-up functionality to the library.

Thanks again!

@etienne,

Your solution still works fine, but how could you adapt it if you are using a PlotlyComponent under React, like the example below:

ReactDOM.render(
            React.createElement(
                PlotlyComponent, {
                    data: data,
                    layout: layout,
                    config: config,
                    useResizeHandler: true,
                    style: {
                        width: "100%",
                        height: "100%"
                    }
                }
            ),
            document.getElementById('div')
        );

I can make the plot editable, but can’t go back to editable=false. Instead of a HTML button I am adding a modebar button to handle this.

var config = {
            modeBarButtonsToAdd: [{
                name: 'Edit Plot',
                icon: icon,
                click: changeEditableMode
            }],

Thanks in advance