HELP - yaxis2 with different order than the "main" chart

[kabure]

Hi fellows,

I’m trying to do a chart where I plot the distribution and the of each feature by my “target” and in the yaxis2 I want to plot the % of positive values for each value in the category.

The order of %Attrition is different and giving an ugly visualization.

How could I fix the problem to order and set the Attrition correctly?

Thank you in advance.

Sample data and code

data = dict()
data['InternetService'] = ['DSL', 'DSL', 'DSL', 'DSL', 'Fiber optic', 'Fiber optic',
                         'Fiber optic', 'DSL', 'Fiber optic', 'DSL', 'DSL', 'No',
                         'Fiber optic', 'Fiber optic', 'Fiber optic', 'Fiber optic', 'No',
                         'Fiber optic', 'DSL', 'Fiber optic', 'DSL', 'No', 'No', 'DSL',
                         'DSL', 'DSL', 'Fiber optic', 'DSL', 'DSL', 'DSL', 'Fiber optic',
                         'Fiber optic', 'DSL', 'No', 'DSL', 'Fiber optic', 'Fiber optic',
                         'Fiber optic', 'Fiber optic', 'Fiber optic', 'DSL', 'DSL', 'No',
                         'DSL', 'DSL', 'Fiber optic', 'DSL', 'Fiber optic', 'DSL', 'DSL']

data['Churn'] = ['No', 'No', 'Yes', 'No', 'Yes', 'Yes', 'No', 'No', 'Yes', 'No',
                 'No', 'No', 'No', 'Yes', 'No', 'No', 'No', 'No', 'Yes', 'No',
                 'Yes', 'No', 'Yes', 'No', 'No', 'No', 'Yes', 'Yes', 'No', 'Yes',
                 'No', 'No', 'No', 'No', 'No', 'No', 'Yes', 'No', 'Yes', 'Yes',
                 'No', 'No', 'No', 'No', 'No', 'No', 'No', 'Yes', 'No', 'No']

df = pd.DataFrame(data)

tmp_churn = df[df['Churn'] == "Yes"]
tmp_no_churn = df[df['Churn'] == "No"]

## Creating a 
tmp3 = pd.DataFrame(pd.crosstab(df['InternetService'],df['Churn'], normalize='index'))
tmp3 = tmp3.reset_index()

trace1 = go.Bar(
    x=tmp_churn['InternetService'].value_counts().index,
    y=tmp_churn['InternetService'].value_counts().values,
    name='Yes_Attrition',opacity = 0.8, marker=dict(
        color='gold',
        line=dict(color='#000000',width=1)))

    
trace2 = go.Bar(
    x=tmp_no_churn['InternetService'].value_counts().index,
    y=tmp_no_churn['InternetService'].value_counts().values,
    name='No_Attrition', opacity = 0.8, marker=dict(
    color='lightskyblue',
    line=dict(color='#000000',width=1)))
    

trace3 =  go.Scatter(   
    x=tmp3['InternetService'].values,
    y=tmp3['Yes'].values,
    yaxis = 'y2',
    name='% Attrition', opacity = 0.6, marker=dict(
    color='black',
    line=dict(color='#000000',width=0.5
    )))

layout = dict(title =  str('InternetService'),
          xaxis=dict(), 
          yaxis=dict(title= 'Count'), 
          yaxis2=dict(#range= [-0, 75], 
                      overlaying= 'y', 
                      anchor= 'x', 
                      side= 'right',
                      zeroline=False,
                      showgrid= False, 
                      title= '% Attrition'
                     ))

fig = go.Figure(data=[trace1, trace2, trace3], layout=layout)
iplot(fig)

Output: