4

Plotly's docs show a hovertemplate that provides access the x & y values in the text, but how can we access data in the other columns?

Imports:

import pandas as pd  
import plotly.plotly as py
import plotly.graph_objs as go
from plotly.offline import download_plotlyjs, init_notebook_mode, plot

Code:

test_data = {"client1-percent":[90,100,60]
             , "client1-volume":[500000,3542,20000]
             , "client2-percent":[99,63,98]
             ,"client2-volume":[6423,6524,5737]
            }
df = pd.DataFrame(test_data)

data = [go.Scatter(
    x = df.index.values
    , y = df.loc[:,col].values
    , hovertemplate = "Percent: %{y:.1f}% | Volume: {}"
    , mode = 'lines+markers'
    , name = col.replace("-percent","")
) for col in df.columns if "-volume" not in col]

plot(data, filename='test.html')

enter image description here

So the specific question here is this: how can client volume be added to the text in this plotly tooltip?

blehman
  • 1,870
  • 7
  • 28
  • 39

1 Answers1

4

Ok, I think I have what you want. I had to change the name of client3-volume to client2-volume so I could grab it with some logic from the list comprehension. I made a text object in the Scatter objects, and pass both the y and text into the hovertemplate through hoverinfo. If you have a smarter way to grab the volume columns associated with the client percent columns from you df you can change the text = ... to whatever will send it the data you want.

test_data = {"client1-percent":[90,100,60]
             , "client1-volume":[500000,3542,20000]
             , "client2-percent":[99,63,98]
             ,"client2-volume":[6423,6524,5737]
            }

df = pd.DataFrame(test_data)

data = [go.Scatter(
    x = df.index.values
    , y = df.loc[:,col].values
    , text = df[col.replace('-percent','-volume')].values
    , hoverinfo = 'y+text'
    , hovertemplate = "Percent: %{y:.1f}% | Volume: %{text}"
    , mode = 'lines+markers'
    , name = col.replace("-percent","")
) for col in df.columns if "-volume" not in col]

plot(data, filename='test.html')
Mason Caiby
  • 1,846
  • 6
  • 17