Hover mode incorrect order

Dash Python
1

Hey,
My hovermode count is displaying in the incorrect order.
This is because the customdata is generated in descending order but naturally due to the variety of characteristics that can be selected and displayed, the histogram traces shift order does align with the count.

image
image1269×833 31 KB 

@app.callback(
    Output('feature-graphic', 'figure'),
    [Input('slct_xaxis', 'value'),
     Input('select_region', 'value'),
     Input('slct_xaxis2','value'),
     Input('slct_v', 'value')])
def update_graph(slct_xaxis, select_region, slct_xaxis2, slct_v):

    region_mirco_census_filtered_region_and_slct_variable = region_mirco_census.loc[(region_mirco_census['UK region'] == select_region) & (region_mirco_census[slct_xaxis2].isin(slct_v))]
    region_mirco_census_filtered_uk = region_mirco_census[region_mirco_census[slct_xaxis2].isin(slct_v)]
    region_mirco_census_filtered_region = region_mirco_census.loc[region_mirco_census['UK region'] == select_region]
    
    customdata_uk = region_mirco_census[slct_xaxis].value_counts()
    customdata_region = region_mirco_census_filtered_region[slct_xaxis].value_counts()
    customdata_uk_slct_variables = region_mirco_census_filtered_uk[slct_xaxis].value_counts()
    customdata_region_slct_variables = region_mirco_census_filtered_region_and_slct_variable[slct_xaxis].value_counts()
    
    
    
    fig = go.Figure()

    fig.add_trace(
       
        go.Histogram(
            x=region_mirco_census_filtered_uk[slct_xaxis], customdata = customdata_uk_slct_variables, histnorm='percent', marker = dict(color=corporate_colors['light-green']),
            opacity=0.8, name="England and Wales Selected Second Variable(s)", hovertemplate='<b>Percenatge: %{y:.2f}</b><br>Count: %{customdata} <extra></extra>'
        )
    )

    fig.add_trace(
            go.Histogram(
                
                x=region_mirco_census_filtered_region_and_slct_variable[slct_xaxis], customdata = customdata_region_slct_variables, histnorm='percent',
                marker=dict(color='rgba(0,0,0,0)', line=dict(width=4, color= corporate_colors['medium-blue'])),
                opacity=0.8, name="Selected Region & Selected Second Variable(s)", hovertemplate='<b>Percenatge: %{y:.2f}</b><br>Count: %{customdata} <extra></extra>'
            )
    )
    
    fig.add_trace(
            go.Histogram(
                
                x=region_mirco_census[slct_xaxis], customdata = customdata_uk, histnorm='percent', marker=dict(color='rgba(0,0,0,0)', line=dict(width=4, color=corporate_colors['burnt-orange'])),
                opacity=0.8, name="England and Wales", hovertemplate='<b>Percenatge: %{y:.2f}</b><br>Count: %{customdata} <extra></extra>'
            )
    )
    
    fig.add_trace(
            go.Histogram(
                
                x=region_mirco_census_filtered_region[slct_xaxis], customdata = customdata_region, histnorm='percent', marker=dict(color='rgba(0,0,0,0)', line=dict(width=4, color=corporate_colors['medium-green'])),
                opacity=0.8, name="Selected Region", hovertemplate='<b>Percenatge: %{y:.2f}</b><br>Count: %{customdata} <extra></extra>'
            )
    )
        
    fig.update_layout(height=750, barmode='overlay',
        margin=dict(l=20, r=20, t=20, b=70),  
        font = {'family' :  'sans-serif'},
        paper_bgcolor = 'rgba(0,0,0,0)',
        plot_bgcolor = 'rgba(0,0,0,0)',
        xaxis = corporate_xaxis,
        yaxis = corporate_yaxis,
        legend_title_text='Please Click to Select Traces:',
        legend_font_family =  'sans-serif',
        legend_font_color = corporate_colors['light-green'],
        legend_font_size =15)
    
    fig.update_xaxes(categoryorder="total descending")
    fig.update_yaxes(range=[0, 100])

    #fig.show()
    return fig