Search code examples
pythonpandashoverbokehpandas-bokeh

How to add tooltip in pandas-bokeh area chart?


I tried to make an area chart of cummulative corona virus cases in USA. But, there is no tooltip in the area chart.

Area Chart

If i change the area chart into line chart, the tooltip appear like it should be.

Line Chart

How can i make the tooltip appear on area chart?

This in the code:

import pandas as pd
import numpy as np
import pandas_bokeh

df = pd.read_excel('D:/Coding Practice/data/data_corona_usa.xlsx')
df = df.iloc[::-1].reset_index()
df['Cummulative Cases'] = df['cases'].cumsum()
df['date'] = df['dateRep'].dt.strftime('%D')

pandas_bokeh.output_notebook()

df.plot_bokeh(
    kind='area',
    x= 'dateRep',
    y='Cummulative Cases',
    xlabel = 'Date',
    ylabel = 'Cummulative Cases',
    hovertool_string= r'''<h1> Date: @{date} </h1>
        <h2> Cummulative Cases: @{Cummulative Cases} </h2>''',
    title='US Corona Cases (cummulative)',
    hovertool=True,
    fontsize_title=18,
    logy=True,
    stacked=False,
    legend='top_left'

Solution

  • I believe that you meant mostly the hover tool, the area chart does not support it just yet, I am using the 1.3.4 bokeh version, there is a fresh one 2. something, maybe try to update your bokeh and you won't have this issue.

    here is an area chart I have done, which the hovertool doesn't work either, despite everything done as supposed.
    data

    df = pd.read_csv('BokehApp/Data/houseStock1.csv')
    df = df[['Year', 'Dublin_Vacant', 'Irl_Vacant', 'Dublin_Total','Irl_Total']]
    df.columns = ['Year', 'Dublin vacant', 'Ireland vacant', 'Dublin', 'Ireland']
    ll = list(df.columns[1:])
    source = ColumnDataSource(data=dict(x=df.Year.values,y=df['Ireland'], y1=df['Dublin'], y2=df['Ireland vacant'], y3=df['Dublin vacant']))
    a2 = figure(plot_width=550, plot_height=350, title='Irish House Stock', tools = 'pan, wheel_zoom, box_zoom, reset') #, tooltips=ToolTips)
    hover = HoverTool()
    hover.tooltips=[('Ireland', '@y'), ('Dublin','@y1'), ('Ireland vancant', '@y2'), ('Dublin vacant','@y3')]
    a2.add_tools(hover)
    
    colors = viridis(4)
    a2.varea_stack(['y3','y2','y1','y'], x='x', source=source, color=colors[::-1], legend=ll, muted_alpha=0.2)
    a2.legend.location='top_left'
    a2.legend.click_policy="mute"
    a2.yaxis[0].formatter = NumeralTickFormatter(format="0 M")
    tick_labels = {'500000':'0.5M','1000000':'1M','1500000':'1,5M','2000000':'2M','2500000':'2,5M'}
    a2.yaxis.major_label_overrides = tick_labels
    a2.xaxis.ticker = df.Year.values
    a2.title.text_font_size = '15px'
    a2.legend.background_fill_alpha=None
    a2.legend.border_line_alpha=0
    a2.legend.label_text_font_size = "11px"
    a2.xaxis.major_label_text_font_style = 'bold'
    a2.grid.grid_line_color=None
    a2.toolbar.autohide = True
    a2.outline_line_color=None
    show(a2)