# Callback error with dropdown and hoverdata **URL:** \ **Category:** Dash Python\ **Tags:** question\ **Created:** [February 2, 2023, 8:05pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243 "2023-02-02T20:05:16Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 2, 2023, 8:05pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/1 "2023-02-02T20:05:16Z")
Hello!! I’m new to python. I’m building a dash app that has two charts: i) the first is a bar+line graph where the x axis is dates and the y axis is the number of codes on that date. This chart can be modified through a dropdown (month and week filters) ii) the second chart is a pie chart which is modified via hover data of the first chart. The challenge here is to get the second graph to work after I select the filters from the dropdown. I managed to make it work. This is the code: ```auto #LAYOUT html.Div(children=[ dcc.Dropdown(id='DROPDOWN', options=[ {'label':'Month', 'value':'Month'}, {'label':'Week', 'value':'Week'}], html.Div(children=[ html.Div(children=[ dcc.Graph( id='line_chart', figure=line_fig), dcc.Graph( id='pie_chart', figure={}) ]) ]) ]) #CALLBACK FOR THE DROPDOWN @app.callback( Output(component_id='line_chart', component_property='figure'), Input(component_id='DROPDOWN', component_property='value') ) def update_plot(selection): df_line_fig = df_line_fig_1.copy(deep=True) if selection == 'Month': line_fig = px.line(data_frame = df_line_fig_1, x= 'month', y= 'code') return line_fig_m1 else: line_fig = px.line(data_frame = df_line_fig_1, x= 'week', y= 'code') return line_fig_m1 #CALLBACK FOR THE PIE CHART - HOVERDATA @app.callback( Output(component_id='pie_chart', component_property='figure'), Input(component_id='line_chart', component_property='hoverData'), Input(component_id='DROPDOWN', component_property='value') ) def capture_hover_data(hov_data, selection): df_line_fig = df_line_fig_2.copy(deep=True) if selection == 'Month': if hov_data is None: #made this transposition to be able to use the pie chart transf_df = df_line_fig_2[df_line_fig_2['month'] == '10 - 2022'].reset_index() transf_df1 = transf_df[['Group 1', 'Group 2']] #labels that will be shown in the pie chart transf_df2 = transf_df1.T.reset_index() pie_fig = px.pie(data_frame = transf_df2, values=0, names='index') return pie_fig else: hov_month = hov_data['points'][0]['x'] #same transformation code transf_df = df_line_fig_2[df_line_fig_2['month'] == hov_month].reset_index() transf_df1 = transf_df[['Group 1', 'Group 2']] transf_df2 = transf_df1.T.reset_index() pie_fig = px.pie(data_frame = transf_df2, values=0, names='index') return pie_fig else: if hov_data is None: transf_df = df_line_fig_2[df_line_fig_2['week'] == '03 - 10'].reset_index() transf_df1 = transf_df[['Group 1', 'Group 2']] transf_df2 = transf_df1.T.reset_index() pie_fig = px.pie(data_frame = transf_df2, values=0, names='index') return pie_fig else: hov_week = hov_data['points'][0]['x'] transf_df = df_line_fig_2[df_line_fig_2['week'] == hov_week].reset_index() transf_df1 = transf_df[['Group 1', 'Group 2']] transf_df2 = transf_df1.T.reset_index() pie_fig = px.pie(data_frame = transf_df2, values=0, names='index') return pie_fig ``` The problem is that when I change the dropdown filter (month to week or week to month) the following error appears in the dash: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/f/2f87d5e3cec335a13cef03da9c3b8dab19fbe290.png) The strange thing is that after this warning the pie chart continues to work normally and updates whenever I move the mouse over the data of the first chart. The error always shows when I change de filter in the dropdown. I suspect that the problem is, when I change the filter, the app try to find a data for the pie chart and don’t find. I’ve been trying hard but I am not able to solve it. Any help here please? ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [February 2, 2023, 8:15pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/2 "2023-02-02T20:15:36Z")
Hi @tex.y , this is the problem here: > [@tex.y](#): > > ` pie_fig = px.pie(data_frame = transf_df2, values=0, names='index')` what are you trying to achieve by setting `values=0`? ---
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 2, 2023, 8:17pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/3 "2023-02-02T20:17:44Z")
Hello! @AIMPED 0 is the name of the column that appears after `transf_df1.T.reset_index()` I already tryed to rename this column, but the error is the same. ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [February 2, 2023, 8:21pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/4 "2023-02-02T20:21:44Z")
If it’s really the name you should specify ‘0’ Waht is the result of data\_frame.columns? ---
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 2, 2023, 8:21pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/5 "2023-02-02T20:21:59Z")
to show more context: This is the datafram before **transf\_df1.T.reset\_index():** ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/9/699f4d0a09a9dc53a1df43027c67c9027a0fc511.png) This is the dataframe after ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/b/cbc2f4c622b9e2aa857eeda6a87f973d6535da23.png) That’s why I used **pie\_fig = px.pie(data\_frame = transf\_df2, values=0, names=‘index’)** so I can use the pie chart ---
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 2, 2023, 8:24pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/6 "2023-02-02T20:24:12Z")
@AIMPED already tryed too! this is the error when you set to ‘0’ ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/f/4f399505c4fd37752a135d0e10710bc04c1b55ed.png) The name of the column is 0 ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [February 2, 2023, 8:30pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/7 "2023-02-02T20:30:07Z")
Well, this is a problem with pandas and not related to plotly or dash. Without your data it will be difficult to help. Maybe you could share your data or an equivalent dummy DataFrame. ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [February 2, 2023, 8:32pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/8 "2023-02-02T20:32:23Z")
Hello @tex.y, It should be `'0'` not int `0`. I think you need to change your column names, I dont think it likes integers for columns names, at least not from plotly’s interactions. ---
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 2, 2023, 8:36pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/9 "2023-02-02T20:36:07Z")
I think the main problem is that I have to tranform the columns to rows with: **transf\_df1.T.reset\_index():** Is there a way I can use px.pie with this type of df? ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/9/699f4d0a09a9dc53a1df43027c67c9027a0fc511.png) ---
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 2, 2023, 8:40pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/10 "2023-02-02T20:40:42Z")
@jinnyzor hello! I already tryed to change the column name, for examplo to ‘groups’ the same error: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/c/2cce038d3c744beb0b0f1b2e02dbbc76862e84e8.png) ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [February 2, 2023, 8:42pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/11 "2023-02-02T20:42:21Z")
You should be able to rename the columns of the df after transforming. ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [February 2, 2023, 8:44pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/12 "2023-02-02T20:44:48Z")
Could you please provide a MRE? > [@How to write a Minimal Reproducible Example (MRE)](https://community.plotly.com/t/how-to-write-a-minimal-reproducible-example-mre/61502): > > Adding a minimal reproducible example to your questions will help attract community members to answer your question. The goal of writing a MRE is to allow other members of the community to run the code on their computers and “reproduce” the error, so that they can best help you. Please make sure that your MRE includes data and that the code is correctly pre-formatted. To preformat, copy and paste the code in your post and then click on \ (Preformatted text), as shown on the image: ---
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 2, 2023, 11:01pm UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/13 "2023-02-02T23:01:42Z")
@AIMPED @jinnyzor hello my friends, really sorry if I can’t explain the problem properly. English is not my first language. What’s happening is nothing to do with the name of the column. I will try to explain: 1. When I open the dash app, everything is working fine. I can hover the data on the first chart and the second one will change accordingly 2. When I change the filter in the dropdown, this error appears. Its just a warning. My dash app continues to work, the first chart it’s updated accordingly with the dropdown filter, the hover data continues to change the second chart and so on. 3. If I change the filter in the dropdown again, the same warning shows. Matter of fact, everytime I change the filter the waring shows, but this problem dont affect the charts. What I investigate here is that the two filters in the dropdown menu are associate with two differents dfs. One df to the month data and other to the week data (my filters). When I click to change the filter [month to week], my second chart is still associated with the previously month data e the warning is actually telling me that the new week data that is in the dash app now don’t correspond to any data used to generate the second chart. Pretty sure the solution is changing something in the if-else. I need to be able to tell the code “wait until I hover the data so you can generate the chart” ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [February 3, 2023, 6:23am UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/14 "2023-02-03T06:23:18Z")
OK. So what you can do is use ctx (callback context) for your second callback. If the callback has been triggered by the change of the drop-down, do something. If callback has been triggered by hover, do other stuff. > **[Advanced Callbacks | Dash for Python Documentation | Plotly](https://dash.plotly.com/advanced-callbacks)** > > Now that you've gotten through the basics, explore some other things you can do with callbacks - from performance improvements to callback contexts. If you had provided a MRE, I am pretty sure this problem would have been solved by now. ---
**Author:** ![tex.y](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tex.y/32/22700_2.png) [@tex.y](https://community.plotly.com/u/tex.y)\ **Post date:** [February 8, 2023, 3:04am UTC](https://community.plotly.com/t/callback-error-with-dropdown-and-hoverdata/72243/15 "2023-02-08T03:04:28Z")
Just found the answer and it is unbelievably simple. For future references, To fix this you just need to change ```auto html.Div(children=[ dcc.Graph( id='line_chart', figure=line_fig) ``` to ```auto html.Div(children=[ dcc.Graph( id='line_chart', figure={}) ```