Hover Text over Fill area

📊 Plotly Python
1

I have a plot of digital signals. I am trying to shade in certain ‘stages’ of the process that I am recording. I have tried reading through the documentaion and haven’t found a straight forward answer to the following questions.

  1. First and formost: Can you add hovertext to the fill area? When the cursor is over the ‘Green’ area, I want the cursor box to say “Stage 0”. Here is my code for trying to accomplish this:

    trace_stage0=go.Scatter(
    x = [points['A'][0], points['B'][0]], 
    y = [1,1], 
    mode = 'line', 
    line = dict(width=0.2, color='rgb(0, 190, 0)'), 
    fill = 'tozeroy',
    hoveron = "fills",
    hovertext = "Stage 0",
    showlegend = False)
for i in range(Num_Channels):
    fig.append_trace(trace0[i],i+1,1)
    fig.append_trace(trace_stage0,i+1,1)

  2. How can I get rid of the end points of each line? To me, they are distracting from the information I have trying to portray. I have tried ‘none’, but that apparently takes away my ability to control the color of the fill.

  3. Is there a way to adjust the opaqueness of the fill? I would like to make it a little lighter. Thanks

Digital Capture
Digital Capture.JPG1068×714 71.3 KB

2

Hey @Tatanka,
Each one of your issues can be solved.

  1. Define a dummy trace consisting in points placed in the center of each filled rectangle, color them with the fillcolor,
    and define the associated list of texts to be displayed on hover. Example:

    trace1=dict(type='scatter',
        x=[1,2,3,4],
        y=[-0.5, 1.7 5, 3, 2],
        mode='markers',
        text=['stage 0', 'stage 1', 'stage 2', 'stage 3'],
        hoverinfo='text',
        marker=dict( color=['magenta', 'red', 'blue', 'yellow'])
      )

  2. To remove the end points, associate to your scatter plot with mode ‘markers+lines’ , the list of points size, and assign to the last point the size 0:

    trace2=dict(type='scatter',
   x=[1,2,3,4],
   y=[-0.5, 1.75, 3, 2.3],
   mode='markers+lines',
   marker=dict(size=[12,12,12,0])
   )

  3. To make your fillcolor more transparent, use rgba instead of rgb:

    fillcolor= 'rgba(123, 211, 97, 0.75)'
1 Like