Hover data wrong when adding color dimension to scatter plot

Dash Python
1

I am having a strange issue:
I created a scatter plot and two sub-graphs that depend on the hover information similar to this example.

As long as I don’t adjust the color of the points in the scatter plot, the hover data is working fine. However, if I adjust the color of the points to show the countries being in different continents, the hover data is not working anymore and showing strange data (not the correct countries).

My code is afs follows:

dbc.Row(dcc.Graph(id='crossfilter-country-scatter', hoverData={'points': [{'customdata': 'Australia'}]})),
dbc.Row(dcc.Graph(id='x-time-series')),

@app.callback(
    Output('crossfilter-country-scatter', 'figure'),
    Input('crossfilter-xaxis-column', 'value'),
    Input('crossfilter-yaxis-column', 'value'),
    Input('crossfilter-size', 'value'))
def update_graph(xaxis_column_name, yaxis_column_name, size):
    fig = px.scatter(dff, x=xaxis_column_name, y=yaxis_column_name, size=size, color='Continent', hover_name='Country')    
    fig.update_traces(customdata=dff['Country'])
    fig.update_xaxes(title=xaxis_column_name)
    fig.update_yaxes(title=yaxis_column_name)
    fig.update_layout(margin={'l': 10, 'b': 50, 't': 10, 'r': 0}, hovermode='closest')
    fig.update_layout(showlegend=False)
    return fig

@app.callback(
    Output('x-time-series', 'figure'),
    Input('crossfilter-country-scatter', 'hoverData'),
    Input('crossfilter-xaxis-column', 'value'))
def update_x_timeseries(hoverData, xaxis_column_name):
    country_name = hoverData['points'][0]['customdata']
    dff2 = dff2[dff2['Country'] == country_name]

    fig = px.scatter(dff2, x='Year', y=xaxis_column_name, size='Population', hover_name='Country', hover_data=['Continent'])
    fig.update_traces(mode='markers')
    fig.update_layout(height=225, margin={'l': 10, 'b': 20, 'r': 10, 't': 10})
    return fig

As soon as I remove the color=‘Continent’ part it works fine. Furthermore, hover data is correct for one group of countries (one continent).

2

Hi,

I believe your error is the same as the one on this thread:

My recommendation is use “hovertext” instead of “customdata” in hoverData:

country_name = hoverData['points'][0]['hovertext']
2 Likes