How to draw lines with vertical bar chart multicategory

📊 Plotly Python
1

Hi everybody, I’m new here and this is my first post, usually I find all the answers here in the forum but I’ve come to a point that I really don’t know what to do anymore. I am creating a vertical bar chart where the x axis is multi categories, so that for each month (January to November) I can select the employees of each workshop (dbc.Tabs) through a dcc.dropdown with the option multi = True and with the value=first name of the list. In the same chart I am trying to draw lines for each of the employees using a y2 axis of percentage of some selected metrics also through a Dcc.Dropdown using the parameters of multi and value being True and first of the List.
but after several attempts only the markers appear, even appear in the correct positions vertically. It is worth noting that the bars are also generated by a dcc.Dropdown, also with True and first data of the list for multi and value. if someone can help me I will be very grateful. Here’s a print screen and my relevant part code:

Captura de tela 2023-12-17 113019
Captura de tela 2023-12-17 1130193306×1124 135 KB

fig = make_subplots(specs=[[{"secondary_y": True}]])
 
 # bar chart code
 for i, coluna in enumerate(lista_colunas):
        if data_df.empty or coluna not in data_df.columns:
            continue

        for pessoa in dropdown_pessoal_stored:
            df_subset_pessoa = data_df[data_df['POSTO_NOME'].isin([pessoa])]

            for mes in meses:
                mes = mes.strftime('%m-%Y')  # Formatar a data para string
                df_subset_mes = df_subset_pessoa[df_subset_pessoa['MES_ANO'] == mes]

                if df_subset_mes.empty:
                    continue

                if coluna in selected_colunas_horas:
                    print(f'y_bar = {len(df_subset_mes[coluna].values)}')
                    fig.add_trace(go.Bar(
                        x=[[mes], [pessoa]],
                        y=df_subset_mes[coluna].values,
                        name=f"{pessoa}",
                 
                        width=0.15,                                                                                                                  
                    ), secondary_y=False,

                    )
            
# Scatter plot code                                                                                                    
for i, coluna in enumerate(selected_colunas_percentual):
        y_column = coluna

        for nome in dropdown_pessoal_selected:
            df_subset_pessoa = y2_df[y2_df['POSTO_NOME'].isin([nome])]

            for mes in meses:
                mes = mes.strftime('%m-%Y')  # Formatar a data para string
                df_subset_mes = df_subset_pessoa[df_subset_pessoa['MES_ANO'] == mes]

                plot_line_df = df_subset_mes.groupby(['MES_ANO', 'POSTO_NOME']).agg(
                    {y_column: 'max', **{col: 'first' for col in colunas_hover}}).reset_index()

                plot_line_df['MES_ANO'] = pd.to_datetime(plot_line_df['MES_ANO'])
                plot_line_df['MES_ANO'] = plot_line_df['MES_ANO'].dt.strftime('%m-%Y')

                fig.add_trace(go.Scatter(
                    name=percentual_dict[coluna] + '-' + nome,
                    x=[[mes], [nome]],
                    y=plot_line_df[y_column].values,
                    yaxis='y2',
                    mode='lines+markers',
                    line=dict(
                        color=color_map_percent.get(nome, 'steelBlue'),
                        width=2,
                    ),
                    marker=dict(
                        color=color_map_percent.get(nome, 'steelBlue'),
                        size=6
                    )
                ), secondary_y=True,
                )
 fig.update_layout(
        barmode='group',
        xaxis=dict(
            autorange=True,
         yaxis2=dict(
            overlaying='y',
            tickmode='sync',
            anchor='x',
            autorange=True,
            side='right',
        ),
)
2

Hi @Breno ,

I think why your lines is not showing, because your scatter plot y data have NaN value between data point that showing as marker. So it prevent to draw line.

You can check by print the y values of scatter plot.
If your print, y values maybe will displayed like [ 113.75, NaN, 86.67,NaN, ...,...,..., 24.42, NaN].

is it your expected result to be something like image below ?

image
image1786×835 25 KB

If it is, you can interpolate the NaN values using pandas.Series.interpolate() and add new Scatter before the original one to draw line only.
You need to hide name of new scatter from legend and also hide hoveinfo.


.... 

# Add new scatter plot, only for providing line to original Scatter plot.
fig.add_trace(go.Scatter(
            x=[[mes], [nome]],
            y=plot_line_df[y_column].interpolate(limit=1, limit_direction='forward') if np.isnan(plot_line_df[y_column].iloc[0]) else y.interpolate(limit=1, limit_direction='backward'),
            yaxis='y2',
            mode='lines',
            line=dict(
                color=color_map_percent.get(nome, 'steelBlue'),
                width=2,
            ),
            hoverinfo="skip",
            showlegend =False,
        ), secondary_y=True,
)

fig.add_trace(go.Scatter(
            name=percentual_dict[coluna] + '-' + nome,
            x=[[mes], [nome]],
            y=plot_line_df[y_column].values,
            yaxis='y2',
            mode='lines+markers',
            line=dict(
                color=color_map_percent.get(nome, 'steelBlue'),
                width=2,
            ),
            marker=dict(
                color=color_map_percent.get(nome, 'steelBlue'),
                size=6
            )
        ), secondary_y=True,
)

Hope this help.

3

Hy @farispriadi you are a life savior, helps much more you can imagine, no doubt you will save me again onde day . Thanks again

1 Like