Hover mode incorrect order

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.

@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