Functionality to interactively move figures?

I am curious if there is any functionality or tools in Bokeh to interactively move figure position? For example, in this web application:

Many users have wanted to see the panels in different order. Are there any tools I am not aware of for users to move the position of figures? In this case, I am using gridplot such as:

  for f in figs:

  grid = gridplot(
    children = children,


I am thinking of something similar to functionality of the up/down arrows here:

There’s nothing directly built-in but you could add CustomAction to toolbars (with custom icons, e.g. up or down arrows) and then the JS callback for the action could re-order the children in the grid plot accordingly.

A more modern UI would be to embed the individual Bokeh plots into some draggable containers in a custom template, instead of using a gridplot.


You might consider Holoviz panel. See

The panel server is the bokeh server. My typical use case as a someone who is biased towards bokeh – because that is where I cut my teeth – is to do most everything in native bokeh but judiciously introduce panel when I want a few additional widgets or control of layout items that they make straightforward.

The end result being that I can do all of my development in bokeh and add panel elements that just work nicely with bokeh. And the method to serve them is basically the same. I suspect you could introduce the features you want from panel without much change to a majority of your code.

Here’s a very simple example using panel’s GridStack layout, which does permit dragging around plots to change their order using just a mouse, i.e. no up/down arrow manipulations. This is along the lines of @Bryan comment about more modern UIs.

Just save the code below as a file, .e.g. and serve like you would a bokeh file. (Directory structure apps would have similar syntax as the bokeh server counterpart.)

panel serve

And in your browser


Hopefully this helps.

Good luck.

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import numpy as np

from panel.layout.gridstack import GridStack
from bokeh.plotting import figure

gstack = GridStack(width=800, height=600)

t = np.arange(0.0, 1.0, 0.01)

P = [figure(title='Signal {:}'.format(i)) for i in range(3)]

for i,p in enumerate(P):
    p.scatter(x=t, y=np.random.randn(len(t)))
    gstack[i,0] = p
1 Like

@_jm this is a great suggestion. I will give it a try and let you know what I come up with. Thanks!