Pie chart styling

plotly.js
1

I need something like this
image
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]

2

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.

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
image570×589 7.49 KB

3

In addition, you may consider using marker.line.width with hole options as illustrated in this demo.

1 Like
4

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 likeimport plotly.graph_objects as go in JS