Delete annotation and shapes in editable mode

The editable mode of Plotly.JS is really great.

I want to add the ability to remove annotation/shapes. For examples, select an annotation and press Delete key should remove it.

How difficult is it to modify Plotly.JS source code for this features? Which module should I look into?

This one: https://github.com/plotly/plotly.js/blob/master/src/components/annotations/draw.js

Actually, if you drag the added annotation to other place and click the original point again, the annotation will be moved. Please see here.

Hi andrey,
did you found a solution for this, actually i am stuck in some same sort of problem.

Some years later: also looking for an answer :smiley:

To delete shapes with the keyboard you first need to wrap the div inside some html element that can be focused since divs do not support focus, in this example I use a button, then access the button’s keyup event and well the rest of the code is easy To understand, as for the annotations, they cannot be selected like the shapes (I think) but you could activate their click event using the captureevents property and in this way you will have access to the plotly_clickannotation event and when you click on any annotation you save the value or index of the annotation to be able to delete it in the button event

1 Like

I leave this more complete example with the deletion of annotations