Black Lives Matter. Please consider donating to Black Girls Code today.

Events for shapes?

Hi! I have some rectangles, and I’d like to change the style when hover on them, and perform some actions when clicking. I used the Plotly shapes to draw:

But it seems the shapes don’t support any events? If so, I wonder do you have any suggestions on alternative options to work around? I tried to use a scatter plot on top of that, but the markers can only be squares, not rectangles. Thanks!

1 Like

That is indeed the case, unfortunately.

I would use a shape and a scatter trace in tandem. First draw a shape as you would normally, then add a scatter trace with x/y coordinates along the shape. To not obstruct the shape, you can try setting marker.opacity: 0.

1 Like

If so, I wonder do you have any suggestions on alternative options to work around? I tried to use a scatter plot on top of that, but the markers can only be squares, not rectangles.

I would use a shape and a scatter trace in tandem. First draw a shape as you would normally, then add a scatter trace with x/y coordinates along the shape. To not obstruct the shape, you can try setting marker.opacity: 0.

Thanks! This works, the only thing is I’d like to make the marker size larger otherwise the click event is triggered only if the mouse is close to the point (ideally I’d like to trigger when click on anywhere on the rectangle shape). Also I need to figure out how to change the style of the rectangle on hover… Thanks for you suggestion!