How do I change the CSS of the Bokeh plot when I use hvPlot or HoloViews?

HoloViews
1

I would like to make hvPlot and HoloViews look and feel more awesome. One thing I cannot figure out how to change is the styles defines by css. Including the toolbar and tooltips.

How do I apply custom CSS to all plots created with hvPlot and HoloViews using the Bokeh backend?

Example

I can style different parts like below. But unfortunately I can only add the css when creating a Panel app (see bottom).

....

style = DEFAULT_STYLE

style.font="Helvetica"

import holoviews as hv

hv.extension("bokeh")
hv.renderer("bokeh").theme = style.create_bokeh_theme()

import hvplot.pandas
from bokeh.sampledata.autompg import autompg_clean as df

from bokeh.events import DoubleTap
from bokeh.models import CustomJS

def hook(plot, element):
    plot = plot.handles["plot"]
    plot.toolbar.autohide = True
    plot.js_on_event(DoubleTap, CustomJS(args=dict(p=plot), code="p.reset.emit()"))
    plot.toolbar_location="above"

from holoviews import opts
opts.defaults(opts.Bivariate(active_tools=["pan", "wheel_zoom"]))
opts.defaults(opts.Bivariate(hooks=[hook]))

plot = df.hvplot.bivariate("accel", "mpg", cut=False, cmap='Blues', height=500, responsive=True)

import panel as pn
pn.config.raw_css.append(style.css())
pn.extension()

pn.panel(plot).servable()
1 Like