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

**URL:** <https://community.plotly.com/t/how-do-i-convert-a-server-callback-to-client-side-callback/66965>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [August 14, 2022, 6:46am UTC](https://community.plotly.com/t/how-do-i-convert-a-server-callback-to-client-side-callback/66965 "2022-08-14T06:46:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Keiden](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@Keiden](https://community.plotly.com/u/Keiden)\
**Post date:** [August 14, 2022, 6:46am UTC](https://community.plotly.com/t/how-do-i-convert-a-server-callback-to-client-side-callback/66965/1 "2022-08-14T06:46:30Z")

</div>

```auto
@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?

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [August 15, 2022, 11:40am UTC](https://community.plotly.com/t/how-do-i-convert-a-server-callback-to-client-side-callback/66965/2 "2022-08-15T11:40:11Z")

</div>

Hi,

Welcome to the community! 🙂

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](https://plotly.com/javascript/pie-charts/). 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!