Scatter and bar overlayed charts hover not working

📊 Plotly Python
1

Hi everyone,

I have a graph mixing vertical bars and a scatter on top. The hover works perfectly fine on the scatter however, the hover of both bars won’t pop.

Please find below a reproducible example of the matter before mentioned :

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
import pandas as pd

d = {‘year’:[1, 2, 3], ‘field_1’: [0.1, 0.2, 0.3], ‘field_2’: [3, 4, 5], ‘field_3’: [1, 2, 3]}
df = pd.DataFrame(data=d)

app = dash.Dash(name)
server = app.server
app.config.suppress_callback_exceptions = True

app.layout = html.Div(
dcc.Graph(
figure=go.Figure(
data=[
go.Scatter(
name=‘Rendement Net Net (%)’,
x=df[‘year’],
y=df[‘field_1’],
yaxis=‘y2’,
mode=‘lines+markers+text’,
marker=dict(size=30),
text=df[‘field_1’].round(1),
textfont={‘color’:‘white’},
hovertemplate = 'Année : %{x}
Rendement Net Net : %{y:.} ',
line={‘shape’:‘spline’},
),
go.Bar(
name=“Cash-Flow Net”,
x=df[“year”],
y=df[“field_2”],
yaxis=‘y1’,
customdata=df[“field_2”].round(1),
hovertemplate = 'Année : %{x}
Cash-Flow Net : %{y:.} ',
),
go.Bar(
name=“Actif Immobilier Acquis”,
x=df[“year”],
y=df[“field_3”],
yaxis=‘y1’,
hovertemplate = 'Année : %{x}
Actif Immobilier : %{y:.} ',

                                    ),
                                ],
                                layout=go.Layout(
                                    shapes=[
                                        dict(
                                           type="line",
                                           x0=0,
                                           y0=0,
                                           x1=max(df['year']) + 1,
                                           y1=0,
                                           line=dict(
                                                color="grey",
                                                width=1,
                                            ),
                                        ),
                                   ],
                                    xaxis=dict(title='Années'),
                                    yaxis1=dict(title='Euros (000)'),
                                    yaxis2=dict(
                                                showgrid=False,
                                                rangemode="tozero",
                                                showticklabels=False,
                                                ),
                                    barmode='relative',
                                    showlegend=True,
                                    legend=dict(orientation='h',
                                                yanchor='top',
                                                xanchor='center',
                                                y=1.2, x=0.5),
                                    font=dict(size=10),
                                    margin=go.layout.Margin(l=10, t=10, b=10, r=10),
                                    paper_bgcolor='rgba(0,0,0,0)',
                                    plot_bgcolor='rgba(0,0,0,0)'),
                            ),
                            id='rev_graph',
                            config={'displayModeBar': False},
                            style={
                                   'height':'300px',
                                   'display':'inline-block',
                                   'width':'93%',
                                   }
                            ),
                        )

if name == ‘main’:
app.run_server(debug=False)

I’d be grateful if anyone can bring some help !!

Thanks in advance,
Antoine