How to add color-picker in Bokeh?

0 0 1 minute read

In this article, we are going to see how to add a color picker widget in bokeh.

Widgets are the best way to make charts more interactive. We can also add widgets in the Bokeh application to provide the best front-end user visualization. Using widgets we can do many things like update charts, connect to other programmatic functionality. One of the widgets is the color picker.

Creating a color picker for the line chart in bokeh:

Python3

# displaying the chart 
from bokeh.io import show 
from bokeh.layouts import column 
  
# importing colorpicker model from bokeh 
from bokeh.models import ColorPicker 
  
# plotting the figure 
from bokeh.plotting import Figure 
  
plot = Figure(x_range=(0, 1),  
              y_range=(0, 1),  
              plot_width=350,  
              plot_height=350) 
  
line = plot.line(x=(0,1),  
                 y=(0,1), 
                 color="black",  
                 line_width=4) 
  
picker = ColorPicker(title="Line Color") 
  
picker.js_link('color',  
               line.glyph, 
               'line_color') 
  
show(column(plot, picker))

Output:

Color Picker in Bokeh

We plot a line chart with a color picker. Here we have explicitly specifies the line chart color ‘black’. The color of the line is by default ‘blue’ of a line chart. We can choose any color from the color picker and change our line chart color. Here I have chosen green color.

Green color Line Chart – with color picker