How do i convert a server callback to client side callback?

Dash Python
1 
@app.callback(
    Output(component_id="Pie", component_property="figure"),
    Input(component_id="storage", component_property="data")
)
def pie_chart(storage_data):
    dt = json.loads(storage_data)
    df = pd.DataFrame(dt)
    fig = px.pie(df, values="Number of stocks", names="Direction", labels="Direction", hole=0.3, hover_data=None,
                 title="Stocks")
    dic = {
        "showlegend": False,
        "paper_bgcolor": "#171a24",
        "plot_bgcolor": "#171a24",
        "modebar_remove": True,
        "font": dict(color="white")
    }
    fig.update_traces(textposition="inside", textinfo="label+percent")
    fig.update_layout(dic)
    return fig

i have been trying to convert this callback to a client callback for hours but i can’t, i am not familiar with javascript at all., how should i approach the process?

2

Hi,

Welcome to the community! :slightly_smiling_face:

Based on your callback, here are some tips to this task:

  1. You don’t have to convert the content of dcc.Store.data to a string. Instead just save it as an array of dict and Dash will serialize as json for you. If you do it, then it will be a JSON object in the clientside callback.

  2. Make sure that you know how to create a pie chart in javascript. Since you are not familiar with JS, it might be worth converting from px to graph objects, as the latter is closer to the JS way.

  3. fig.update_layout is simply an assignment in the layout object in JS.

  4. If you get stuck in any point, just use print(fig.to_dict()) in the server-side callback and compare it with the clientside version.

Good luck!