How to selecting columns in dataframe for hovertemplate?

📊 Plotly Python
1

Hi there!

I wish to have a hovertemplate where I can select different columns of my dataframe.

I wrote a function to create a trace line for several subplots.

def add_trace_line(figure_object, df, x, y, row_nr, col_nr, scattertype, line_color, width, name, opacity=1):


      _height = df['height']
      _thickness1 = df['thickness_1']
      _thickness2 = df['thickness_2']


      _hovertemplate = ('<i>Value</i>: %{y:.2f}'+
                      '<br><b>Height</b>: %{_height}<br>'+
                      '<br><b>Thickness 1</b>: %{_thickness1}<br>'+
                      '<br><b>Thickness 2</b>: %{_thickness2}<br>'+
                      '<br><b>KM</b>: %{x}<br>')

      
      if scattertype == 'line':
        if row_nr != 0:
            return figure_object.add_trace(go.Scatter(x=x,
                                                      y=y,
                                                      hovertemplate = _hovertemplate,
                                                      line_color=line_color,
                                                      line=dict(width=width),
                                                      name=name, 
                                                      opacity=opacity,
                                                      ), row=row_nr, col=col_nr)

However, this does not work.

Hence, how can I select multiple columns of my dataframe and show them when hovering?

Thank you in advance!

2

Hi @NielsHoogeveen, welcome to the forum! Your function does not work because you need to pass to plotly the data which will appear in the hover. The hovertemplate is just a formatted string. You can add customdata to the go.Scatter trace as described in https://plot.ly/python/hover-text-and-formatting/#adding-other-data-to-the-hover-with-customdata-and-a-hovertemplate, or use px.scatter from plotly.express, in which case the syntax would be

px.scatter(df, x=x, y=y, hover_data=['height', 'thickness_1', 'thickness_2'])

Note that you can modify the hovertemplate generated by plotly.express using fig.update_traces.

3

Hi @NielsHoogeveen,

To get a working definition of customdata from three dataframe columns, insert in your trace definition:

customdata  = np.stack((df['height'], df['thickness_1'], df['thickness_2']), axis=-1)


hovertemplate = ('<i>Value</i>: %{y:.2f}'+\
                      '<br><b>Height</b>: %{customdata[0]}<br>'+\
                      '<br><b>Thickness 1</b>: %{customdata[1]}<br>'+\
                      '<br><b>Thickness 2</b>: %{customdata[2]}<br>'+\
                      '<br><b>KM</b>: %{x}<br>')

For more details see this tutorial: https://plot.ly/~empet/15366.

3 Likes
5

Hi,

One problem I have with using Plotly Express with custom data in the hover is that you cannot remove the variable of the axis.

For instance, I have document embeddings where the axis are just x1 and x2, and I only want in the hover the Title of the document and its ID.

How can I tell plotly express to remove x1 and x2 from the hover info?

6

Hi @PabloRR10 with the hovertemplate you can decide what you want to appear in the hover or not, for example in the example given by @empet above if you remove %{x} and %{y} you will not have the axis values. Please see https://plotly.com/python/hover-text-and-formatting/#customize-tooltip-text-with-a-hovertemplate for more details

1 Like