Question about custom title and hover data

Hello my friends, can someone help me?

I have this dataframe:


that generates this plotly chart:


this is the code for the chart:

line_fig_code = px.line(data_frame = df_code,
    x= 'start_date',
    title='# Calls',
    color_discrete_sequence= ["rgb(1, 27, 105)"],

line_fig_code.update_yaxes(range = [0,50], showticklabels=True, showgrid=False, visible=False, tickfont={'size':12})
line_fig_code.update_xaxes(showline=True, linecolor='#eeefee', tickfont={'size':12}, tickmode='linear', gridcolor='#eeefee',
                        showticklabels=True, visible=True)
line_fig_code.update_traces(textposition='top center', showlegend=False, hovertemplate='Qtd: %{y}', texttemplate='%{y}',
                          title={'x':0.05,'xanchor':'left', 'y':0.999, 'yanchor':'top', 'font':{'size':15}}, 
                          margin=dict(l=10, r=10, t=30, b=5))

I have three questions:

  1. Since I’m sharing this graph with others, I’d like to make the number of the sum of the codes (22+32+34+18…) visually clear without having to put a β€œtotal” label on the graph. Is there a way to put this sum next to the title of the graph via plotly or is the only way is to create a Div with a specific code for this sum?

  2. I would like the hover data to only show the text codes (code_text column on the df) that each day has. It is possible?

  3. I would like to be able to extract the text codes that each day has from the graph. Is there a way to create an action in which, when I click on a specific day on the chart, these text codes appear on the screen (perhaps replacing the chart or performing an action of downloading a txt file with these codes).

thank you so much!

Hi @ytex

That would be great if you ask your questions separately in different post. For your first question I think you can use the following code to add any text, anywhere of your plot. But you should use graphical object import plotly.graph_objects as go instead px.

import plotly.graph_objects as _go
fig = _go.Figure()

                    text="My Text or ....",
                    font=dict(size=30),    #Size of your text
                    x=0.01, y=0.91,          #Location of your text
                    showarrow=False,    #To stop showing annotation arrow
                    xref="paper", yref="paper",                                         
                    xanchor="left", yanchor="bottom",

Now you can set the location next to the title or any other locations.

1 Like

For second question if you use graphical object import plotly.graph_objects as go instead px, you can add hover with any data to your scatters. For this purpose, use the following code:

import plotly.graph_objects as go

Third question is also possible but please ask it in another post.