Show name of shape on hover (or always visible)

Hi there,

I wonder if it is possible to show the name of a shape (annotation) on hover, or if this wasn’t possible, to show it always. I don’t understand the explanation in the help concerning the name parameter:

Example:

import plotly.graph_objects as go

# prepare data
data = go.Scatter(
    x=[1, 10], 
    y=[1, 10],
    mode='markers',
    marker={
        'size': 8,
        'symbol': 'circle-open',
    },
)

# create figure
fig = go.Figure(data=data)

# add shape
fig.add_shape(
    {
        'type':'rect', 
        'x0': 3, 'x1': 5, 
        'y0': 3, 'y1': 5, 
    },
    editable=True,
    name='shape_1',
)
fig.add_shape(
    {
        'type':'rect', 
        'x0': 8, 'x1': 9, 
        'y0': 8, 'y1': 9, 
    },
    editable=True,
    name='shape_2',
)

# show figure
fig.show()

Thanks in advance!

Hey @AIMPED ,

I couldn’t find a hover option for shapes. But one option is that you can use go.scatter which supports hover.

import plotly.graph_objects as go

fig = go.Figure()


fig.add_trace(go.Scatter(x=[3,5,5,3,3],
                         y=[3,3,1,1,3],
                         fill='toself',
                         fillcolor='yellow',
                         mode='lines',
                         name="Rectangle"
                         )
              )


fig.add_shape(type='rect',
              x0=6, x1= 10,
              y0=6, y1= 10,
              name="rectangle",
              fillcolor='red'
              )


fig.show()

1 Like

Hi @akroma ,

thanks for this idea, I have come across something similar while googling my “problem”. It`s a nice workaround which unfortunately I can’t use.

The shapes are actually created by the user in a Dash app as a annotation. They should be editable, i.e. the user should be able to change the size or position.

Do you by any chance know, what the name parameter of the layout.shapes is meant to be for?

The shapes are actually created by the user in a Dash app as a annotation. They should be editable, i.e. the user should be able to change the size or position.

I understand. Unfortunately I don’t know about the name parameter of the layout.shapes.

But I’ll try to come up with different solution.

1 Like

Yeah the name attribute for shapes is pretty arcane, we’ve probably never properly documented this but it’s a strange use case anyway. You can put a named shape in a graph template, then it will be drawn on any graph that uses this template but if you want to modify the shape you can make a new one in the graph with a templateitemname matching the name found in the template shape. There’s an example of this for annotations in our tests - we make a watermark annotation and then draw three copies in different sizes - you can see the result here

Hover on shapes has come up before - see Hover & text on shapes · Issue #4780 · plotly/plotly.js · GitHub - would be a great feature to add, hasn’t bubbled up in our queue yet but if anyone would like to work on it it probably wouldn’t be too difficult, we’d be happy to point you in the right direction. Or if you’re interested in sponsoring the work please reach out :slight_smile:

3 Likes

Hi @alexcjohnson ,

Thank’s for your answer and the examples of using the name attribute. Unfortunately I am just a Dash user and not a javascript developer so I can’t help creating this feature.

Once I decide how to solve this in my app, Ill post an answer here.

As promised, here is how I will do this in my app.

With the release of Plotly 5.14.0 labels have been added to annotations.

These labels are always visible but I could imagine creating a ON/OFF switch for these labels by changing the text color of the label using a rgba string with opacity set to 0.

1 Like