Data tooltips in Bokeh don't show data, showing '???' instead

Question

Note from maintainers: this question concerns the obsolete bokeh.charts API that was removed several years ago. See this section for information about hover tools with Bar charts in modern Bokeh:

https://docs.bokeh.org/en/latest/docs/user_guide/categorical.html#hover-tools

---

I'm trying to create a stacked bar chart using Bokeh. I'd like to use the hover feature, displaying the relevant data in each part of the bar, but instead of the data Bokeh shows '???'.

I got the data in an excel file called "Example worksheet", in a sheet called "Sales". The sheet looks like this:

Year    Category    Sales
2016    A           1
2016    B           1
2016    C           1.5
2017    A           2
2017    B           3
2017    C           1
2018    A           2.5
2018    B           3
2018    C           2

I tried running the following code:

import numpy as np
import scipy as sp
from bokeh.charts import Bar, output_file, show
from bokeh.models import HoverTool
import pandas as pd

x = pd.read_excel('Example worksheet.xlsx', 'Sales')
bar = Bar(x, label = 'Year', values = 'Sales', agg = 'sum', stack = 'Category', tools='hover')
hover = bar.select(dict(type=HoverTool))
source = x
hover.tooltips = [('Category', '@Category'),('Sales', '@Sales')]
output_file("Expected Sales.html")
show(bar)

After the run I get the following message in Python console (I don't think it's related to the topic, but I put it anyway):

(process:4789): GLib-CRITICAL **: g_slice_set_config: assertion 'sys_page_size == 0' failed

And then on the browser I get the following chart:

As you can see, the data is replaced by question marks. I got this result on both FF 41.0.1 and Chromium 45.0.2454.101, running on Ubuntu 15.04 (64-bit).

I read the Bokeh tutorial http://docs.bokeh.org/en/latest/docs/user_guide/tools.html#hovertool

but it doesn't refer to bar charts. I also found this on Stackoverflow:

Bokeh hover tooltip not displaying all data - Ipython notebook.

The question might be related, but frankly I didn't quite understand the answer.

Answer 1

I was having the same problem. I found this reference useful. The tooltip for Sales would use the generic @height, e.g.: hover.tooltips = [('Sales', '@height')]

Similarly, replacing @height with @y would give you the total sales for each year. I haven't figured out how to use the tooltip to access the stacked categories or how to use the ColumnDataSource referred to in the link.

Answer 2

I was able to recreate your problem and found a solution. First, the recreation of your DF:

data = [k.split() for k in 
'''2016    A           1
2016    B           1
2016    C           1.5
2017    A           2
2017    B           3
2017    C           1
2018    A           2.5
2018    B           3
2018    C           2'''.split('\n')]

x = pd.DataFrame(data, columns = ['year','category','sales'])
x['year']  = x['year'].astype(object)
x['sales'] = x['sales'].astype(float)

Now the solution:

from bokeh.charts import Bar, output_file, show
from bokeh.models import HoverTool
from bokeh.models import ColumnDataSource    

source = ColumnDataSource(x)

bar = Bar(x, label='year', values='sales', agg='sum', stack='category', title="Expected Sales by year", tools = 'hover')
hover = bar.select(dict(type=HoverTool))
hover.tooltips = [('Year', '@x'),('Sales', '@y')]
show(bar)

Which produces the following chart:

The addition of:

class ColumnDataSource(*args, **kw)

is probably the most important part of the solution (you can read more about it here).