# Arc Shape with Path

**URL:** <https://community.plotly.com/t/arc-shape-with-path/7205>\
**Category:** 📊 Plotly Python\
**Created:** [December 7, 2017, 6:46pm UTC](https://community.plotly.com/t/arc-shape-with-path/7205 "2017-12-07T18:46:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![eekk](https://avatars.discourse-cdn.com/v4/letter/e/9d8465/32.png) [@eekk](https://community.plotly.com/u/eekk)\
**Post date:** [December 7, 2017, 6:46pm UTC](https://community.plotly.com/t/arc-shape-with-path/7205/1 "2017-12-07T18:46:04Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [December 7, 2017, 6:56pm UTC](https://community.plotly.com/t/arc-shape-with-path/7205/2 "2017-12-07T18:56:56Z")

</div>

@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](https://github.com/plotly/plotly.js/blob/master/src/components/shapes/constants.js) are listed the available commands for paths.

---

<div class="post-metadata">

**Author:** ![extraymond](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@extraymond](https://community.plotly.com/u/extraymond)\
**Post date:** [January 15, 2018, 2:10pm UTC](https://community.plotly.com/t/arc-shape-with-path/7205/3 "2018-01-15T14:10:09Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![openafox](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/openafox/32/7814_2.png) [@openafox](https://community.plotly.com/u/openafox)\
**Post date:** [October 3, 2019, 7:41pm UTC](https://community.plotly.com/t/arc-shape-with-path/7205/4 "2019-10-03T19:41:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [October 8, 2019, 9:03pm UTC](https://community.plotly.com/t/arc-shape-with-path/7205/5 "2019-10-08T21:03:47Z")

</div>

@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:

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/df14bda96b23333ead6f0e3420d3c1227352aaaa.png)

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

---

<div class="post-metadata">

**Author:** ![mutia](https://avatars.discourse-cdn.com/v4/letter/m/f0a364/32.png) [@mutia](https://community.plotly.com/u/mutia)\
**Post date:** [March 23, 2020, 10:20am UTC](https://community.plotly.com/t/arc-shape-with-path/7205/6 "2020-03-23T10:20:12Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [March 23, 2020, 12:16pm UTC](https://community.plotly.com/t/arc-shape-with-path/7205/7 "2020-03-23T12:16:47Z")

</div>

Hi @mutia

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