How-To: Use JSLink for updating plot properties

Hi, there have been attempts to change the colormap and other attributes of a plot.

The solution in this forum so far has been to create a new plot object with the new cmap.
However, sometimes this is not desired or feasible (large plots or keeping existing zoom level).

So, I pieced together a small example of how jslink can be used to update a heatmap’s colorbar range and colormap via JS, instead of re-creating the plot from scratch every time.



cmaps = matplotlib.pyplot.colormaps()
cmap_dict = {}

for cmap in cmaps:
    _cmap =, 12)
    cmap_dict[str(cmap)] = [matplotlib.colors.rgb2hex(_cmap(i)[:3]) for i in range(_cmap.N)]

def get_blank_plot():
    #p1 = hv.Curve([],kdims=["Date"],vdims=["Price [BTC]"]).opts(responsive=True)
    ls = np.linspace(0, 10, 200)
    xx, yy = np.meshgrid(ls, ls)
    p1 = hv.Image(np.sin(xx)*np.cos(yy),kdims=['x','y'],vdims=['z']).opts(responsive=False,cmap='viridis',colorbar=True,colorbar_position='left',yaxis='right',colorbar_opts={'title':'z.'},xaxis=None,show_grid=True)
    return p1

class Example(param.Parameterized):
    EXAMPLE_PLOT = get_blank_plot().opts(width=500,height=400)
    def __init__(self, **params):
        self.plot_pane = pn.pane.HoloViews(self.EXAMPLE_PLOT)
        self.cmap = pn.widgets.Select(options=list(cmap_dict.keys()))
        self.colormap_slider = pn.widgets.RangeSlider(end=1,start=0,step=0.1,name='Colorbar Slider')

        # Change colorbar range
        self.colormap_slider.jslink(self.plot_pane, code={'value':'''
            color_mapper.low = source.value[0];
            color_mapper.high = source.value[1];
        # Change cmap
        self.cmap.jslink(self.plot_pane, code={'value':'''
            console.log('Cmap is', source.value)
            color_mapper.palette = colors[source.value];
            '''},args={'colors': cmap_dict})
    def panel(self):
        return pn.Column(pn.Row(self.colormap_slider,self.cmap),self.plot_pane)
app = Example(name='')

Essentially, you access bokeh’s glyph object via the jslink to change some properties of an already existing plot. It took me some time to figure out which glyph parameters corresponded to which plot properties and how to change them. I imagine others have been struggling with that too. So, I thought I’d share.

The resources on Panel’s documentation, as well as @jsignell’s PyData talk helped a lot!

Unfortunately, it requires writing a bit of JS, which I have no experience with.
Also, the palette currently only takes an array of str colors or hex colors. Would be nice to just pass the colormap str directly (i.e. ‘viridis’).

@Marc @mycarta @ahuang11


Thanks for sharing. It helps us all.

1 Like