# Pie chart styling

**URL:** <https://community.plotly.com/t/pie-chart-styling/39909>\
**Category:** plotly.js\
**Created:** [May 22, 2020, 11:03am UTC](https://community.plotly.com/t/pie-chart-styling/39909 "2020-05-22T11:03:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrew2](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@Andrew2](https://community.plotly.com/u/Andrew2)\
**Post date:** [May 22, 2020, 11:03am UTC](https://community.plotly.com/t/pie-chart-styling/39909/1 "2020-05-22T11:03:53Z")

</div>

I need something like this  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/5/52687e29fcd458bc10de9284e744bbfb86d3f231.png)  
partly draw circle and set background color(so it will be seen if data is not 100%)  
can I achieve it with plotly?  
and also take attention that values array will be with one element. f.e. [20]

---

<div class="post-metadata">

**Author:** ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)\
**Post date:** [May 25, 2020, 12:31pm UTC](https://community.plotly.com/t/pie-chart-styling/39909/2 "2020-05-25T12:31:48Z")

</div>

Hi @Andrew2 welcome to the forum! You can use two `go.Scatterpolar` traces, for this, one for the background and one for the partial circular arc. Below is an example, using the Python API, but you can adapt it to Javascript. If you need to have the rounded tips for the circular arc, you can compute and plot a filled curve instead, using the `fill` attribute to `go.Scatterpolar`.

```auto
import plotly.graph_objects as go
import numpy as np
fig = go.Figure()
theta = np.linspace(0, 40, 20)
all_theta = np.linspace(0, 360, 100)
line_width=100
fig.add_trace(go.Scatterpolar(r=[1,] * len(all_theta), theta=all_theta, opacity=0.2, 
                              line=dict(width=line_width, color='blue')))
fig.add_trace(go.Scatterpolar(r=[1,] * len(theta), theta=theta, 
                              line=dict(width=line_width, color='blue')))
fig.update_traces(line_width=line_width, showlegend=False)
fig.update_polars(angularaxis_visible=False, radialaxis_visible=False)
fig.update_layout(template=None)
fig.show()

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/4c76c8483e9d4be89f760142bb1aad53cbf45ac6.png)

---

<div class="post-metadata">

**Author:** ![archmoj](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/archmoj/32/8388_2.png) [@archmoj](https://community.plotly.com/u/archmoj)\
**Post date:** [May 25, 2020, 1:50pm UTC](https://community.plotly.com/t/pie-chart-styling/39909/3 "2020-05-25T13:50:40Z")

</div>

In addition, you may consider using `marker.line.width` with `hole` options as illustrated in this [demo](https://codepen.io/MojtabaSamimi/pen/jObRBZq?editors=0010).

---

<div class="post-metadata">

**Author:** ![Andrew2](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@Andrew2](https://community.plotly.com/u/Andrew2)\
**Post date:** [May 27, 2020, 11:32am UTC](https://community.plotly.com/t/pie-chart-styling/39909/4 "2020-05-27T11:32:32Z")

</div>

can you tell me more in details or provide link into docs, where I can find how to create custom figure in JS? I dont found something like`import plotly.graph_objects as go` in JS