How to add CustomJS callback to chart title

Community Support
1

Suppose I have this example chart (taken from gallery):

from bokeh.io import show, output_file
from bokeh.plotting import figure

output_file("bar_basic.html")

fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
counts = [5, 3, 4, 2, 4, 6]

p = figure(x_range=fruits, plot_height=350, title="Fruit Counts",
           toolbar_location=None, tools="")

p.vbar(x=fruits, top=counts, width=0.9)

p.xgrid.grid_line_color = None
p.y_range.start = 0

show(p)

I would like to add a CustomJS callback when the chart title is clicked (“Fruit Counts” in this case). Can I do that?

To give some context, what I’m trying to achieve is to display the calculations that generate the plot data in detail. My idea is to show a bootstrap modal when the title is clicked. Any suggestions are welcome.

Thank you for your time.

2

It is possible, but it is far from being trivial.

In any case, I would strongly advise against doing that, especially if you create something intended for a wide audience.
Titles have no indication that they’re clickable. Creating a regular button with both very simple and expected when it comes to UX.

3

Thank you for your reply @p-himik. The charts are in a dashboard intended for small groups of authorized users, but your point still applies and I will think of a better way that fits UX best practices.

4

If all your titles are of the same height or you don’t care about multiple plots alignment, you can just avoid specifying the title in figure and add it instead as a column(row(Div(text='My Title'), Button(label='Click Me')), figure(...)).

5

That’s a very good idea, my titles all have the same height. Thank you.