plotly.py icon indicating copy to clipboard operation
plotly.py copied to clipboard

Hover support show multiple column

Open eromoe opened this issue 5 years ago • 8 comments

I didn't found a way to do this .

As I saw, plotly only support show 3 column when hovering, and 2 of them must be x and y . The example is

import plotly.express as px

gapminder = px.data.gapminder().query("year==2007 and continent=='Americas'")

fig = px.scatter(gapminder, x="gdpPercap", y="lifeExp", text="country", log_x=True, size_max=60)

fig.update_traces(textposition='top center')

fig.update_layout(
    height=800,
    title_text='GDP and Life Expectancy (Americas, 2007)'
)

fig.show()

But how do I make it show 6 column while hovering ??

In bokeh I can use tooltips to do this, example :

p = figure(title=title,
           x_range=x_range, y_range=y_range,
           x_axis_location="above",   plot_width=width, plot_height=len(y_range)*20,
           tools=TOOLS, toolbar_location='below',
           tooltips=[('name','@product_name'),('code', '@product_code'), ('date', '@date'), ('sc', '@sale_count'), ('pc', '@pred_count'), ('acc', '@acc%')])

p.rect(x=xcol, y=ycol, width=1, height=1,
   source=df,
   fill_color={'field': 'acc', 'transform': mapper},
   line_color=None)

At this point , bokeh is much more better than plotly .

eromoe avatar Aug 08 '19 10:08 eromoe

You can use the hover_data keyword argument of px.scatter() (or any px.function()) which accepts a list of column names and they are all displayed. Here's an example: https://plot.ly/python/hover-text-and-formatting/

nicolaskruchten avatar Aug 08 '19 18:08 nicolaskruchten

Because this does't work, the hover is missing when I use px.function 4 column in hover_data. It only work with one.

My code is very simple , p2 is hourly timeseries with 1600 rows. there may be nan in ['price_plan_market', 'price_plan_store', 'price_flashsale', 'price_guide'] .

fig = px.bar(p2, x="ds", y="sale_count", 
                 hover_name="ds", hover_data=['price_plan_market', 'price_plan_store', 'price_flashsale', 'price_guide'])

fig.update_layout(
    width=800,
    height=400,
)

fig.show()

I found only when change to hover_data=['price_plan_market'] , it would show the hover info in which price_plan_market is not nan.

eromoe avatar Aug 09 '19 01:08 eromoe

Can you share more about what doesn’t work? I’m afraid I don’t understand. Maybe a code sample I could run to reproduce the problem would help...

nicolaskruchten avatar Aug 09 '19 01:08 nicolaskruchten

I use red point to indicate cursor since screen capture couldn't capture it .

This x position, price_plan_market is not nan, hover shows image

This x position, price_plan_market is nan , hove doesn't show image

eromoe avatar Aug 09 '19 01:08 eromoe

Above is single column situation .

It just showed nothing when use 4 column , looks like if there is a nan value in ['price_plan_market', 'price_plan_store', 'price_flashsale', 'price_guide'] then wouldn't show hover . This is the test csv 1.txt

p2 = pd.read_csv('1.txt')
fig = px.bar(p2, x="ds", y="sale_count", 
                 hover_name="ds", hover_data=['price_plan_market', 'price_plan_store', 'price_flashsale', 'price_guide'])

fig.update_layout(
    width=800,
    height=400,
)

fig.show()

eromoe avatar Aug 09 '19 01:08 eromoe

Ah, thanks for the explanation. This does seem like a bug, and I will look into it!

nicolaskruchten avatar Aug 09 '19 02:08 nicolaskruchten

This method seems to working fine for showing multiple columns.. Add list of columns in hover_data and use customdata to show the column value in update traces hover template.

fig = px.pie(holdings, values='CurrentCashAmt', names='Ticker', title='Holdings',hover_name='Ticker',hover_data=["Ticker","P/L", "LTP", "AvgPrice", "Qty"])
fig.update_traces(textposition='inside', textinfo='percent+label',hovertemplate='Ticker: %{customdata[0][0]}<br> P/L %{customdata[0][1]}<br> LTP %{customdata[0][2]} <br> Buy Price %{customdata[0][3]} <br> Qty %{customdata[0][4]} ')

ShubhmAsati avatar Jul 24 '21 18:07 ShubhmAsati

have you tried converting nan to 0

patilabhay679 avatar Jul 22 '22 17:07 patilabhay679