How to add CustomJS callback to chart title

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.

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.

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.

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(...)).

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