Update text in Label/widget with callback

Community Support
1

Hi Bokeh community,

I’m making a bar chart with two bars, the values of which are controlled by widgets/a callback. My goal is to create either a Label or a Div widget (or a different object that contains text) that updates with the values of the bar chart (i.e. "Bar 1: {Value 1}; Bar 2: {Value 2}). Any help would be appreciated!

2

You can’t link labels or divs to a data source, but you can change their value in a JS callback:

from bokeh.layouts import column
from bokeh.models import Button, CustomJS, ColumnDataSource, Div
from bokeh.plotting import show

ds = ColumnDataSource(dict(value=[0]))

d = Div(text=f"Value: {ds.data['value'][0]}")

ds.js_on_change('data', CustomJS(args=dict(d=d),
                                 code="d.text = `Value: ${cb_obj.data['value'][0]}`;"))

b = Button(label="Increment")
b.js_on_click(CustomJS(args=dict(ds=ds),
                       code="ds.data['value'][0] += 1; ds.properties.data.change.emit();"))

show(column(d, b))
3 Likes
3

Thanks @p-himik - that did the trick!

1 Like