Styling a graph with CSS

I’d like to apply CSS to a Bokeh plot. Most specifically I have added plots to a page on which colors are defined in CSS variables and styles and elements on those pages take colours from such vars in the form of (to share on example style in use):

#header {
    width: 100%;
    padding: 10px;
	box-sizing: border-box;
    overflow: hidden;
    background-color: var(--background-header);
    color: var(--text-header);
}

To wit, I don’t want to specify the colours in the Python code server side, but use the same CSS styles and variables other elements do.

I imagine that a plot and all its elements have classes that could be styled and find a clue here:

but I have struggled to find any documentation or examples.

Can someone point me to some? Or lend a little guidance. My immediate interest is in choosing colours that align with the rest of the pages styling and are available in CSS variables. But more generally it would be good to know, have a reference for, how generally to style Bokeh graphs with CSS.

This is not the case at all. Bokeh plots are draw on HTML or Webgl canvases which are raster drawing objects that do not interact with the CSS system at all. All styling has to go through the Bokeh API (i.e. setting property values).

Indeed, I can see that, when I look at the loaded source in the browser, and cannot find elements to inspect.I admit I’m rather inexperienced with canvas objects, but I would like to understand how I reconcile your claim with clues I find on-line (I will have to spread tehse in a few posts as my inital draft was rejected allowing only 2 links and I want to share more.

Two clues are here:

1. Anthonydouc’s use of CSS styling in 2017
2. efremdan1’s discussion of similar in 2021

And a third is here:

3. Tony’s examples here of YAML stylingand CSS in 2019

I could go on. I find tantalizing clues littered around the place, that suggest CSS can be applied to Bokeh elements.

BUT, of course I could be misunderstanding all those. The closes (using colors) seems to be Tony’s YAML sample, specifying colours that way, not quite the same as what I’m hoping for mind you and maybe the YAML is read by Bokah Python before generating the script and div (that is embedded in the ultimate page).

But what is Anthonydouc doing? If not applyapplyimng styles with a snippet like:

    <style>      
        {% include 'styles.css' %}
         .bk-root .bk-toolbar-right .bk-button-bar-list .bk-toolbar-button:hover .bk-tip {
        color: #5DADE2;
        }   
        .bk-root .bk-slider-parent input[type="text"]{
        color: #FDFEFE;
        }   
     </style>

I also read doc like this too:

And can see Bokeh can use named colours and (though I’ve tried out of curiosity and know it doesn’t work) I wonder if a color like “var(–text-header)” might be passed through Bokeh and out teh otehr side applied as a string untouched (Not the case)

But further tantalizing yet incomplete and hard to decrypt clues exist in the doc:

Which suggests clearly that we could provide Bokeh with CSS files that it then uses to. I don’t mind telling Bokeh for example to use the styles from the site (easy to inform it of those CSS files or even customize them so Bokeh can use them).

In short I seem surrounded by clues that suggest something is possible in this space.

Thoughts?

@bernd-wechner Bokeh plots are rendered on canvas, which CSS does not apply to. But Bokeh can also include various DOM elements such as widgets and markups alongside plots, and all of those can be affected by CSS. But your OP said specifically: “I’d like to apply CSS to a Bokeh plot”, so I was responding to that, specifically. With the exception of a few plot overlays (e.g. hover tooltips) is not possible to style plots via CSS, full stop.

examples here of YAML styling and CSS in 2019

YAML is not CSS. The YAML example there demonstrates Bokeh’s programmatic API for providing plot styles. The CSS there is for styling the page around the plot.

Bummer. Looks like the only way then to coordinate Bokeh plot styles with page styles is sever side tor read the CSS file and extract what information is needed from that.

What, out of interest ere CSS resources for?

I have found great technical documentation but not the ocneptual, as in what I use and how I use CSS_RESOURCES.

In latest releases, nothing. The property was left (for now) as a deprecated no-op to avoid breaking old code. Formerly, css_resources was the mechanism for Bokeh to deliver its own necessary CSS resources, that were required for Bokeh to function. But as of version 3.x, Bokeh’s internal CSS resources are shipped as CSS in JS. There’s not much documentation around it because there was typically nothing for users to know or do with it beyond passing it to their page template as-is.

BTW I’ve been trying to start a dev discussion around support for light/dark mode theme selection:

Support for Dark mode / requirements for theming · Discussion #12673 · bokeh/bokeh · GitHub

i.e. a mechanism to automatically couple Bokeh’s API for theming (which is ultimately the only way the canvas drawing can be affected) to CSS in at least a very coarse-grained way (“light” vs “dark” signals).

But perhaps there are opportunities to generalize. I can’t speculate when anything might actually be implemented. As with all OSS the best way to help make things happen faster is to decide to become involved.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.