Plotly Dash : Render a pie graph or similar figure

Question

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

Here's my attempt so far, 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=['60'], hole=.5)

    return {'data':[trace]}

Is this possible to do with a pie chart given that I am not displaying any distributions?

Kristian Haga Kristian Haga · Accepted Answer · 2020-12-11T10:52:35

This is absolutely possible using your approach, even though there may be better solutions for this. I have created a quick example for you.

Full code:

import plotly.express as px
import plotly.graph_objects as go
#from jupyter_dash import JupyterDash
from dash import Dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

# Build App
app = Dash(__name__)

app.layout =  html.Div([
    html.Div([
        dcc.Input(id='input', type='text', value='60')
    ]),
    html.Button('Submit', id='lbutton', n_clicks=0),
    html.Div([
        dcc.Graph(id='score_pie')
    ])
], style={'display': 'inline-block', 'width': '60%', 'margin-left': '50%'})
    

@app.callback(
    Output('score_pie', 'figure'),
    [Input('lbutton', 'n_clicks')],
    [State('input', 'value')],
)
def render_score(clicks, score):
        score = int(score)
        
        fig = go.Figure(
            data=[
                go.Pie(
                    labels=['', ''], 
                    values=[score, 100-score], 
                    hole=.5,
                    textinfo='none',
                    marker_colors=['rgb(113, 209, 145)', 'rgb(240, 240, 240)'],
                )
            ],
            layout=go.Layout(
                annotations=[{'text': str(score) + "%", 'x':0.50, 'y':0.5, 'font_size':35, 'showarrow':False}],
                showlegend=False
            )
        )

        return fig

app.run_server(port=8080)

Plotly Dash : Render a pie graph or similar figure

1 Answers