☰Read-only archive⌕
Looking for help with Bokeh?

This is a read-only archive. Ask questions and join the conversation on GitHub.

Visit Community Support on GitHub →
Archived discussions · Captured October 28, 2026

Add Hover to Candlestick

Community Supportbokehjsbokeh
Pinar_Yazgan
Pinar_Yazgan

Hi,
I want to add hover to my candlestick. How can I add?

from math import pi

import pandas as pd

import numpy as np

Load bokeh modules

functions for creating outputs

from bokeh.io import output_file, show, output_notebook

figure creating library

from bokeh.plotting import figure

from bokeh.plotting import figure, output_file, show

Interactivity tools

from bokeh.models import HoverTool

df=stock_data2

output_notebook()

from bokeh.plotting import figure, output_file, show

#df.reset_index(inplace=True)

df[“Date”] = pd.to_datetime(df[“Date”])

inc = df.Close > df.Open

dec = df.Open> df.Close

w = 126060*1000 # half day in ms

TOOLS = “pan,wheel_zoom,box_zoom,reset,save,hover”

#p = p.select(dict(type=HoverTool))

p = figure(x_axis_type=“datetime”, tools=TOOLS, plot_width=1000, title = “GOOGLE Candlestick”)

p.xaxis.major_label_orientation = pi/4

p.grid.grid_line_alpha=0.3

p.segment(df.Date, df.High, df.Date, df.Low,color=“black”)

#df.Open[inc]

#df.Date[dec]

p.vbar(df.Date[inc], w, df.Open[inc], df.Close[inc], fill_color=“#D5E1DD”, line_color=“black”)

p.vbar(df.Date[dec], w, df.Open[dec], df.Close[dec], fill_color=“#F2583E”, line_color=“black”)

#df.Open[“IBM”]

show(p) # open a browser

⌁   Link to post
Ken_Giese
Ken_Giese

This is a more difficult problem than you would think. The plot example uses discrete values instead of a source, but to get the data to the hovertool it needs to be available in the source.

This is how I did it.
put your data table into a source like this:
source = ColumnDataSource(df)

p.vbar(df.Date[inc], w, df.Open[inc], df.Close[inc], fill_color="#228C22", line_color=“black”)
p.vbar(df.Date[dec], w, df.Open[dec], df.Close[dec], fill_color="#F2583E", line_color=“black”)
p.segment(x0=‘Date’, y0=‘High’, x1=‘Date’, y1=‘Low’, source=source, color=“black”)

p.add_tools(HoverTool(
tooltips=[
( ‘date’, ‘@date_str’ ),
( ‘close’,’$@Close{0.2f}’ ), # use @{ } for field names with spaces
],

formatters={
    'close'     : 'printf',   # use 'printf' formatter for 'adj close' field
                              # use default 'numeral' formatter for other fields
},

# display a tooltip whenever the cursor is vertically in line with a glyph
mode='mouse'

))

Note: my column names are a little different than in the original example.

⌁   Link to post
Bryan
Bryan

@Ken_Giese It’s not clear what your question is. Are you asking how to convert the `vbar’ to use an explicit CDS? Are you saying behavior is not what you expect? Of so, you need to desribe both what you expect, and what is actually happening that is different from your expectation.

Additionally, please edit your post to use code formatting so that the code is intelligible (either with the </> icon on the editing toolbar, or triple backtick ``` fences around the code blocks)

⌁   Link to post

End of archived discussion · Replies are disabled