I'm making a scatter plot with bokeh and want to have a custom hover show in the data points. However, I'm having difficulties with the styling because I can't manage to get rid of a white margin that always shows in the hover area.
My code:
import numpy as np
import bokeh.plotting as bp
from bokeh.io import curdoc
# dark theme
curdoc().theme = 'dark_minimal'
# random data
N = 250
data = pd.DataFrame(
{
'x': np.random.randint(0, 100, N),
'y': np.random.randint(0, 100, N),
'z': np.random.randint(0, 100, N),
't': [np.random.choice(['A','B','C','D','E']) for i in range(N)],
}
)
# According to the documentation, this is how you do a custom hover
TOOLTIPS = """
<div style="color: #ffffff; font-size: 12px; background-color: #121111; margin: 0px 0px 0px 0px;">
<div>
<span style="font-size: 16px; font-weight: bold;">Legend Title</span>
</div>
<div>
<span style="font-weight: bold;">Trace:</span>
<span>@t</span>
</div>
<div>
<span style="font-weight: bold;">X:</span>
<span>@x</span>
</div>
<div>
<span style="font-weight: bold;">Y:</span>
<span>@y</span>
</div>
<div>
<span style="font-weight: bold;">Z:</span>
<span>@z</span>
</div>
</div>
"""
TOOLS = "hover,box_zoom,reset"
p = bp.figure(height=750, width=1500, tools=TOOLS, tooltips=TOOLTIPS)
colors = {'A':'blue','B':'red','C':'green','D':'yellow','E':'cyan'}
# Plotting group by group because I need the legend to be interactive
for t,g in data.groupby('t'):
# Add trace
p.scatter(source=g,
x='x', y='y',
size='z',
fill_color=colors[t],
line_width=0,
legend_group='t',
fill_alpha=0.75)
p.legend.click_policy = 'hide'
The problem can be seen very clearly, the white margin in the hover area just doesn't go away, I've tried changing the color or setting the size of the margin to 0, but it always shows no matter what.
Would be very helpful if somebody knows how to solve this styling detail.
