Render a figure similar to pie with hole

I’d like to render a ring / pie - like graph that displays score which is calculated and returned by a callback.

Screen Shot 2020-12-11 at 2.07.40 PM

I have defined the pie figure as:

# Asset Stabilization score graph
 html.Div([
                    dcc.Graph(id='score_pie'),
 ], style={'display': 'inline-block', 'width': '60%', 'margin-left': '50%'}),

Callback:

@app.callback(Output("score-pie", "figure"),
              [
                 Input("lbutton", "n_clicks"),
              ]
             )
def render_score(n_clicks):

    trace=go.Pie(labels=['Score'], values=['83'], hole=.5)

    return {'data':[trace]}

keval

And what is the problem you are facing?

Is this possible using this approach? or are there better ways of doing this?

keval

I think both answers could be yes.

In your code add one value to the pie, and also see that the id has a different spelling (‘score_pie’ vs “score-pie”)

You have more info here:

and here: