Bokeh Colorbar Vertical title to right of colorbar?

Question

I'm trying to do something that I'd normally consider trivial but seems to be very difficult in bokeh: Adding a vertical colorbar to a plot and then having the title of the colorbar (a.k.a. the variable behind the colormapping) appear to one side of the colorbar but rotated 90 degrees clockwise from horizontal.

From what I can tell of the bokeh ColorBar() interface (looking at both documentation and using the python interpreter's help() function for this element), this is not possible. In desperation I have added my own Label()-based annotation. This works but is klunky and displays odd behavior when deployed in a bokeh serve situation--that the width of the data window on the plot varies inversely with the length of the title colorbar's title string.

Below I've included a modified version of the bokeh server mpg example. Apologies for its complexity, but I felt this was the best way to illustrate the problem using infrastructure/data that ships with bokeh. For those unfamiliar with bokeh serve, this code snippet needs to saved to a file named main.py that resides in a directory--for the sake of argument let's say CrossFilter2--and in the parent directory of CrossFilter2 one needs to invoke the command

bokeh serve --show CrossFilter2

this will then display in a browser window (localhost:5006/CrossFilter2) and if you play with the color selection widget you will see what I mean, namely that short variable names such as 'hp' or 'mpg' result in a wider data display windows than longer variable names such as 'accel' or 'weight'. I suspect that there may be a bug in how label elements are sized--that their x and y dimensions are swapped--and that bokeh has not understood that the label element has been rotated.

My questions are:

1. Must I really have to go to this kind of trouble to get a simple colorbar label feature that I can get with little-to-no trouble in matplotlib/plotly?

2. If I must go through the hassle you can see in my sample code, is there some other way I can do this that avoids the data window width problem?

   import numpy as np
   import pandas as pd
   
   from bokeh.layouts import row, widgetbox
   from bokeh.models import Select
   from bokeh.models import HoverTool, ColorBar, LinearColorMapper, Label
   from bokeh.palettes import Spectral5
   from bokeh.plotting import curdoc, figure, ColumnDataSource
   from bokeh.sampledata.autompg import autompg_clean as df
   
   df = df.copy()
   
   SIZES = list(range(6, 22, 3))
   COLORS = Spectral5
   
   # data cleanup
   df.cyl = df.cyl.astype(str)
   df.yr = df.yr.astype(str)
   columns = sorted(df.columns)
   
   discrete = [x for x in columns if df[x].dtype == object]
   continuous = [x for x in columns if x not in discrete]
   quantileable = [x for x in continuous if len(df[x].unique()) > 20]
   
   def create_figure():
       xs = df[x.value].tolist()
       ys = df[y.value].tolist()
       x_title = x.value.title()
       y_title = y.value.title()
      name = df['name'].tolist()
   
      kw = dict()
      if x.value in discrete:
          kw['x_range'] = sorted(set(xs))
      if y.value in discrete:
          kw['y_range'] = sorted(set(ys))
      kw['title'] = "%s vs %s" % (y_title, x_title)
   
      p = figure(plot_height=600, plot_width=800,
                 tools='pan,box_zoom,wheel_zoom,lasso_select,reset,save',
                  toolbar_location='above', **kw)
   
      p.xaxis.axis_label = x_title
      p.yaxis.axis_label = y_title
   
      if x.value in discrete:
          p.xaxis.major_label_orientation = pd.np.pi / 4
   
      if size.value != 'None':
          groups = pd.qcut(df[size.value].values, len(SIZES))
          sz = [SIZES[xx] for xx in groups.codes]
      else:
          sz = [9] * len(xs)        
   
      if color.value != 'None':
          coloring = df[color.value].tolist()
          cv_95 = np.percentile(np.asarray(coloring), 95)
          mapper = LinearColorMapper(palette=Spectral5, 
                                     low=cv_min, high=cv_95)
          mapper.low_color = 'blue'
          mapper.high_color = 'red'
          add_color_bar = True
          ninety_degrees = pd.np.pi / 2.
          color_bar = ColorBar(color_mapper=mapper, title='',
                               #title=color.value.title(),
                               title_text_font_style='bold',
                               title_text_font_size='20px',
                               title_text_align='center',
                               orientation='vertical',
                               major_label_text_font_size='16px',
                               major_label_text_font_style='bold',
                               label_standoff=8,
                               major_tick_line_color='black',
                               major_tick_line_width=3,
                               major_tick_in=12,
                               location=(0,0))
       else:
           c = ['#31AADE'] * len(xs)
           add_color_bar = False
   
       if add_color_bar:
            source = ColumnDataSource(data=dict(x=xs, y=ys, 
                                      c=coloring, size=sz, name=name))
       else:
            source = ColumnDataSource(data=dict(x=xs, y=ys, color=c, 
                                      size=sz, name=name))
   
       if add_color_bar:
           p.circle('x', 'y', fill_color={'field': 'c', 
                    'transform': mapper},
                    line_color=None, size='size', source=source)
       else:
           p.circle('x', 'y', color='color', size='size', source=source)
   
       p.add_tools(HoverTool(tooltips=[('x', '@x'), ('y', '@y'), 
                   ('desc', '@name')]))
   
       if add_color_bar:
           color_bar_label = Label(text=color.value.title(),
                                   angle=ninety_degrees,
                                   text_color='black',
                                   text_font_style='bold',
                                   text_font_size='20px',
                                   x=25, y=300, 
                                   x_units='screen', y_units='screen')
            p.add_layout(color_bar, 'right')
            p.add_layout(color_bar_label, 'right')
   
   
       return p
   
   
   def update(attr, old, new):
       layout.children[1] = create_figure()
   
   
   x = Select(title='X-Axis', value='mpg', options=columns)
   x.on_change('value', update)
   
   y = Select(title='Y-Axis', value='hp', options=columns)
   y.on_change('value', update)
   
   size = Select(title='Size', value='None', 
                 options=['None'] + quantileable)
   size.on_change('value', update)
   
   color = Select(title='Color', value='None', 
                  options=['None'] + quantileable)
   color.on_change('value', update)
   
   controls = widgetbox([x, y, color, size], width=200)
   layout = row(controls, create_figure())
   
   curdoc().add_root(layout)
   curdoc().title = "Crossfilter"
   

Answer 1

You can add a vertical label to the Colorbar by plotting it on a separate axis and adding a title to this axis. To illustrate this, here's a modified version of Bokeh's standard Colorbar example (found here):

import numpy as np

from bokeh.plotting import figure, output_file, show
from bokeh.models import LogColorMapper, LogTicker, ColorBar
from bokeh.layouts import row

plot_height = 500
plot_width = 500
color_bar_height = plot_height + 11
color_bar_width = 180

output_file('color_bar.html')

def normal2d(X, Y, sigx=1.0, sigy=1.0, mux=0.0, muy=0.0):
    z = (X-mux)**2 / sigx**2 + (Y-muy)**2 / sigy**2
    return np.exp(-z/2) / (2 * np.pi * sigx * sigy)

X, Y = np.mgrid[-3:3:100j, -2:2:100j]
Z = normal2d(X, Y, 0.1, 0.2, 1.0, 1.0) + 0.1*normal2d(X, Y, 1.0, 1.0)
image = Z * 1e6

color_mapper = LogColorMapper(palette="Viridis256", low=1, high=1e7)

plot = figure(x_range=(0,1), y_range=(0,1), toolbar_location=None,
             width=plot_width, height=plot_height)
plot.image(image=[image], color_mapper=color_mapper,
           dh=[1.0], dw=[1.0], x=[0], y=[0])

Now, to make the Colorbar, create a separate dummy plot, add the Colorbar to the dummy plot and place it next to the main plot. Add the Colorbar label as the title of the dummy plot and center it appropriately.

color_bar = ColorBar(color_mapper=color_mapper, ticker=LogTicker(),
                     label_standoff=12, border_line_color=None, location=(0,0))

color_bar_plot = figure(title="My color bar title", title_location="right", 
                        height=color_bar_height, width=color_bar_width, 
                        toolbar_location=None, min_border=0, 
                        outline_line_color=None)

color_bar_plot.add_layout(color_bar, 'right')
color_bar_plot.title.align="center"
color_bar_plot.title.text_font_size = '12pt'

layout = row(plot, color_bar_plot)

show(layout)

This gives the following output image:

One thing to look out for is that color_bar_width is set wide enough to incorporate both the Colorbar, its axes labels and the Colorbar label. If the width is set too small, you will get an error and the plot won't render.

Answer 2

As of Bokeh 0.12.10 there is no built in label available for colorbars. In addition to your approach or something like it, another possibility would be a custom extension, though that is similarly not trivial.

Offhand, a colobar label certainly seems like a reasonable thing to consider. Regarding the notion that it ought to be trivially available, if you polled all users about what they consider should be trivially available, there will be thousands of different suggestions for what to prioritize. As is very often the case in the OSS world, there are far more possible things to do, than there are people to do them (less than 3 in this case). So, would first suggest a GitHub Issue to request the feature, and second, if you have the ability, volunteering to help implement it. Your contribution would be valuable and appreciated by many.