Synchronizing Tooltips over multiple plots bokeh

I have created a grid plot using bokeh consisting of multiple vertically stacked line charts senter code hereharing same X axis.My requirement is to have a tooltip displayed on all the charts on hovering over a point on one of the charts.Tried multiple ways, but couldn't find a solution.It would be great if someone out there assist me in resolving this issue.

from bokeh.palettes import RdBu3, RdYlGn3
from bokeh.plotting import figure, output_notebook, show
from bokeh.io import show
from bokeh.models import ColumnDataSource, BoxAnnotation, Button, HoverTool, Text, Circle
from bokeh.models.callbacks import CustomJS
from bokeh.layouts import column, gridplot
from bokeh.models.widgets import TextInput, Div, Select

output_notebook()

#Main Data Source
source = ColumnDataSource(df)
#Filtering the data source based on some condition
df1 = df[Some_Condition]

#Filtered Data Source
sc = ColumnDataSource(df1)

#Callback to be executed on selecting a value from Select widget
callback_select = CustomJS(args=dict(source=source, sc=sc),code="""
    var indices = [];
    var val = cb_obj.value

    sc.data['xx'] = []
    sc.data['yy'] = []
    sc.data['Date'] = []

    for (var i = 0; i < source.get_length(); i++){
        if (source.data['ZZ'][i] == val){
            sc.data['xx'].push(source.data['xx'][i])
            sc.data['yy'].push(source.data['yy'][i])
            sc.data['Date'].push(source.data['Date'][i])
        } else {

        }
    }
    sc.change.emit();

""")


#Select Widget
select = Select(title="ZZ:", value="Select", options=["Opt1", "Opt2", "Opt3"], callback = callback_select)

#Tooltips to be displayed

TOOLTIPS = [("Value: ", "@{xx}")]
TOOLTIPS1 = [("Value: ", "@{yy}")]

#Tools to be shown on plot    
_tools_to_show = 'box_zoom,pan,save,reset,tap,wheel_zoom,crosshair'

#First Chart
p1 = figure(x_axis_type="datetime", plot_height=200, tools = _tools_to_show)

p1.xaxis.visible = False
p1.xgrid.grid_line_color=None
p1.ygrid.grid_line_alpha=0.5
p1.xaxis.axis_label = 'Date'
p1.yaxis.axis_label = 'xx'

#Second Chart
p2 = figure(x_axis_type="datetime", plot_height=200, tools = _tools_to_show)

p2.xgrid.grid_line_color=None
p2.ygrid.grid_line_alpha=0.5
p2.xaxis.axis_label = 'Date'
p2.yaxis.axis_label = 'yy'

#Line charts

c11 = p1.line(x='Date', y='xx', source = sc, color = "green")
c12 = p1.circle(x='Date', y='xx', source = sc)
c21 = p2.line(x='Date', y='yy', source = sc, color = "blue")
c22 = p2.circle(x='Date', y='yy', source = sc)

#Text to be displayed over points on the charts.
visible_text1 = Text(x='Date', y='xx', text='xx', text_color='black', text_alpha=0.5)

visible_text2 = Text(x='Date', y='yy', text='yy', text_color='black', text_alpha=0.5)

#Adding text to the graphs
crt1 = p1.add_glyph(sc, visible_text, selection_glyph=visible_text1)
    crt2 = p2.add_glyph(sc, visible_text2, selection_glyph=visible_text2)


#This piece of code does display multiple tooltips but shows vague behaviour viz. displaying a tooltip where there is no glyph
hover1 = HoverTool(renderers=[c12, c22], tooltips = TOOLTIPS)
hover2 = HoverTool(renderers=[c22, c12], tooltips = TOOLTIPS1)

#Adding hover tools
p1.add_tools(hover1)
p2.add_tools(hover2)

#Creating a grid for plotting
grid = gridplot([select, p1, p2, p3, p4], ncols=1, plot_width=1000, plot_height=1000)

show(grid)

1 answer