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?

1 Answer 1

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')
Sign up to request clarification or add additional context in comments.

1 Comment

I fixed the client-3 typo. Thanks for the help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.