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

Plotly Shape Questions

I’m sorry if this has been asked before. I have no experience at all with javascript and just started using plotly because with dash I can easily use it in Python. That said, I have some questions regarding shapes.

  • Is there a way to plot circles using radius instead of size like in Bokeh?
  • Is there a way to plot scatter points ON TOP OF circles/other shapes, so their visibility doesn’t get reduced?
  • Is there a way to include shapes in the legend so they can be shown/hidden?

I couldn’t find this in the documentation, but if anyone could link me that’d be great. Thanks! :slight_smile:

Please change plotly.js with Python. It’s a Python question.

  1. If you want to define a circular shape giving the center and the radius, you should define
    a function to evaluate points on the circle . Then define a SVG path through the circle points, and fill it:

    def my_circle(center, radius, n_points=75):
        t=np.linspace(0, 1, n_points)
        return x, y 
    trace=dict(x=[2.5,4], y=[1.75,2.35],
               marker=dict(size=9, color='rgb(44, 160, 101)'))
    axis=dict(showline=True, zeroline=False, showgrid=False)
    center=[3.5, 2]
    x,y=my_circle(center, r)
    path='M '+str(x[0])+','+str(y[1])
    for k in range(1, x.shape[0]):
         path+=' L '+str(x[k])+','+str(y[k])
    path+=' Z'
    layout=dict(width=450, height=450, autosize=False,
                xaxis=dict(axis, **dict(range=[1,6])),  
                yaxis=dict(axis,**dict(range=[-1, 4])),
                        fillcolor='rgba(44, 160, 101, 0.5)',
                        line=dict(color= 'rgb(44, 160, 101)')
    fig=dict(data=[trace], layout=layout)


  1. layer='below' inserts the shape below the scatter points.
  2. shapes are not traces, hence they cannot be included in legend.

Amazing, thank you so much! I think I will have to read into SVG a bit more :slight_smile: