Toggle Editable Status - React - Not Working Properly

plotly.js
1

Hello, I am developing with React.
I wish to make the chart editable (and not editable) by clicking a custom button in the modebar.

I am using the useState hook in React and define the options object’s initial state as defined below:
Note ‘options’ is passed as the config object to the plotly chart.

 const [options, setOptions] = useState({
    toImageButtonOptions: {
      format: 'png',
      filename: 'RChart',
      width: 1500,
      height: 700,
      scale: 1
    },
    scrollZoom: true,
    displaylogo: false,
    modeBarButtonsToRemove: ['zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
    modeBarButtonsToAdd: [{ name: 'Edit', click: updateOptions, icon: pencil }],
    editable: false });

The ‘Edit’ modebar button specifies that the click event triggers the updateOptions function.

  var bool_editable = false;
  var annotationArray = useRef([]);

  function updateOptions(){
    bool_editable = !bool_editable;
    console.log(bool_editable);
    const options2  = {...options, editable: bool_editable };
    setOptions(options2);
  }

This works successfully when toggling from not editable to editable. However when toggling back from editable to not editable only part of the chart becomes not editable again. I.e. the following chart properties remain editable:

  • Title
  • Legend (still moveable)

Please advise?

Many thanks.