Question about custom title and hover data

📊 Plotly Python
1

Hello my friends, can someone help me?

I have this dataframe:

df

that generates this plotly chart:

chart

this is the code for the chart:

line_fig_code = px.line(data_frame = df_code,
    x= 'start_date',
    y='code_count',
    labels={'start_date':'','code_count':''},
    title='# Calls',
    width=350,
    height=150,
    template='plotly_white',
    color_discrete_sequence= ["rgb(1, 27, 105)"],
    markers=True,
    text='code_count'
         
    )


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}',
                         textfont={'size':13})
line_fig_code.update_layout(font={'family':'Montserrat'}, 
                          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!

2

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()

fig.add_annotation(
                    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
3

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
fig=go.Figure()
x=[1,2,3,4,5]
y=[5,4,3,2,1]
fig.add_scatter(x=x,y=y,mode='markers',marker=dict(size=25),
                hoverinfo='text',
                hovertext=['a','b','c','d','e'],)
4

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