Toggling Plotly editable: true/false?

plotly.js
1

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.

2

Try:

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

Unfortunately I can’t get it to work.

Any tips? Thank you very much for helping me!

4

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

5

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
6

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?

7

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!

8

@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

10

Was looking for a solution for my problem and found that it is also present in the codepen that @etienne shared.

When toggling from editable to uneditable, the title remains editable.

Any thoughts?