☰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

Adding Labels to Line generated via CustomJS

Community Support
internshipdeco
internshipdeco

Greetings, I have written a simple code which helps me to create a Segment. Now, I want to add a Label to generated Segment .Below mentioned code is for drawing segment on double tap js event (p.js_on_event(‘doubletap’, callback)) .
I need assistance with label as shown in the image below:


Your help would be really appreciated.

from bokeh.io import curdoc
from bokeh.layouts import row
from bokeh.models import ColumnDataSource, Segment, CustomJS, Line, CheckboxGroup

from bokeh.plotting import figure
from bokeh.models import PolyDrawTool, PolyEditTool

p = figure(x_range=(0, 10), y_range=(0, 10), width=400, height=400,  title='Label over Line')

checkbox_group = CheckboxGroup(labels=["fibo"], active=[1]) print(checkbox_group)
l1 = p.multi_line([], [], line_width =5, alpha= 0.4,  color='red', line_dash = 'dashed')
draw_tool_l1 = PolyDrawTool(renderers=[l1], num_objects=3)
source = ColumnDataSource(data=dict(x=[], y=[], x1= [], y1= []))
callback = CustomJS(args=dict(source=source), code="""


             if(source.data.x.length == 0){
                   source.data.x.push(cb_obj.x);
                   source.data.y.push(cb_obj.y);
             }else if(source.data.x.length == 1){
                   source.data.x1.push(cb_obj.x);
                   source.data.y1.push(cb_obj.y);
             }else {
                  source.data.x[1] = x0;
                  source.data.y[1] = y0;
             }


console.log('Tap event occurred at x-position: ' + cb_obj.x)
console.log('Tap event occurred at y-position: ' + cb_obj.y)
source.change.emit()

""")
multi_source = ColumnDataSource(data=dict(xs=[], ys=[]))

p.js_on_event('doubletap', callback)
s1 = Segment(x0='x',y0='y',x1='x1',y1='y1')

p.add_glyph(source, s1, selection_glyph=s1, nonselection_glyph=s1)

def update_flip(attrname, old, new):
# flip the *current* data on *every* button toggle
#source.data = dict(x=source.data['x'], y=flip_signal(source.data['y'], True))
print(new)

#checkbox_group.on_change("active", callback)

p.add_tools(draw_tool_l1)
layout = row(p, checkbox_group)
curdoc().add_root(layout)

Thank You.

⌁   Link to post
Bryan
Bryan

@internshipdeco since you are already using a ColumnDataSource to drive your segments, and (if I understand you cirrectly) you want to have a label per segment, I would suggest you use LabelSet which can be configured to display labels from the same data source as your segments (you would add additional column the the data source for x,y, positions of the labels, and the label text)

⌁   Link to post

End of archived discussion · Replies are disabled