Black Lives Matter. Please consider donating to Black Girls Code today.
Learn about the upcoming Dash Enterprise 4.0 release in the August 5th webinar with Chris Parmer, the Inventor of Dash.

Arc Shape with Path

Hey, I’ve been trying to plot some shapes in plotly, but I can’t seem to get an arc shape to work.

I.e., using the SVG

M 10 10 A 10 10 0 0 1 20 10

for example, like

trace=dict(x=[5,10], y=[5,10],
               mode='markers', 
               marker=dict(size=9, color='orange'))

axis=dict(showline=True, zeroline=False, showgrid=False)

layout=dict(width=450, height=450, autosize=False,
            xaxis=dict(axis, **dict(range=[1,20])),  
            yaxis=dict(axis,**dict(range=[1, 20])),
            shapes=[dict(type='path',
                    layer='below',
                    path="M 10 10 A 10 10 0 0 1 20 10",
                    fillcolor='red',
                    line=dict(color= 'red')
          
    )]
            )
fig=dict(data=[trace], layout=layout)
iplot(fig)

doesn’t plot the shape at all. Is there a workaround to make the arc command work ?

@eek Plotly does not provide the command A for elliptical arc.

Here https://github.com/plotly/plotly.js/blob/master/src/components/shapes/constants.js are listed the available commands for paths.

Thx for your reply! No wonder A is always not working in the path command.
Do you happen to know how can I draw a arc with custom degree(lets say 90 degree circle)?

1 Like

Any word on how to do this or support for arc paths?

@extraymond, @openafox

You can draw both arcs of circle or ellipse, and filled circle or ellipse calling a function that defines the corresponding svg paths:

import numpy as np
import plotly.graph_objects as go

def ellipse_arc(x_center=0, y_center=0, a=1, b =1, start_angle=0, end_angle=2*np.pi, N=100, closed= False):
    t = np.linspace(start_angle, end_angle, N)
    x = x_center + a*np.cos(t)
    y = y_center + b*np.sin(t)
    path = f'M {x[0]}, {y[0]}'
    for k in range(1, len(t)):
        path += f'L{x[k]}, {y[k]}'
    if closed:
        path += ' Z'
    return path    

fig = go.Figure()

# Create a minimal trace 
fig.add_trace(go.Scatter(
    x=[0],
    y=[0.2],
    marker_size=0.1
));

fig.update_layout(width =600, height=400,
           xaxis_range=[-5.2, 5.2], 
           yaxis_range=[-3.2, 3.2],       
    shapes=[
           dict(type="path",
           path= ellipse_arc(a=5, b=3, start_angle=-np.pi/6, end_angle=3*np.pi/2, N=60),
           line_color="RoyalBlue"),
           dict(type="path",
                path = ellipse_arc(x_center=2, a= 0.5, b= 1.5, closed=True),
                fillcolor="LightPink",
                line_color="Crimson")
        ]
        );
fig.show()

arcs

If a=b you’ll get an arc of circle (if layout.width=layout.height), otherwise an arc of ellipse.

1 Like

hello If I want to change your script to giving the parameter x, y, width, height with(width and height as diameter) like

matplotlib ellipse function

https://matplotlib.org/api/_as_gen/matplotlib.patches.Ellipse.html

what is the modification that I need to do?

I tried to replicate this matplotlib function to plotly but I don’t know how, I’ve tried to see the source code but there is no formula to draw the ellipse in there

Hi @mutia

width and height in the matplotlib ellipse definition are 2*a, 2*b while xy =[x_center, y_center].