Bokeh HTML Output

I would like to directly customize the css styles of some Bokeh elements individually. This could be done easily if the Bokeh HTML output contained all of the objects, but it doesn’t seem to do that. Does anyone know if it is possible to make Bokeh produce this output?

Thanks,
Ben

@ben_hastings This question is to vague to know what it is you are actually wanting to accomplish. Do you mean you want to style the elements inside a plot via CSS? If so, that’s not possible at all. Bokeh plots are draw on an opaque raster or webgl canvas. There is no connection between anything inside the canvas, and CSS.

If that’s not what you mean, please elaborate on your ask.

Hi Brian,

Specifically I have a radiobutton group and would like to change the colors of each button in the group independently of each other. Is this possible?

It’s probably not impossible, but also not trivial or simple, I suspect. There is currently nothing that distinguish the individual buttons in the DOM:

Screen Shot 2020-06-09 at 5.42.21 PM998×160 28.8 KB

So I think any ad-hoc solution would involve JavaScript to find the DOM elements and style them manually based on their order or contents.

There are no built-in properties for configuring this dir`ectly from the Python API, or for applying a custom CSS class per-button. (No one has ever asked for either before.) It seems like a reasonable ask, if you want to file a feature request issue on GitHub.

You can apply CSS selectors like :nth-child to select different radio buttons.

But you mentioned that your Bokeh HTML output doesn’t contain all the objects. What do you mean? You added some radio buttons and they’re not on the page at all?

My working example is here :

https://astro.uni-bonn.de/~bhastings/isochrones/testing/evo.html

When you look at the html code for this page, you see that there is no code like

<div class = 'bk bk-btn bk-btn-default'> option 1 <\div>

But your working example doesn’t have any radio buttons, just checkboxes. And they’re there in the HTML, otherwise you wouldn’t see them.

Sorry I meant checkBoxbuttongroup, the two buttons with labels ‘SMC’ and ‘LMC’ in the top left corner.

When I look at the html of my example, what I see is that some JavaScript is being called that will ultimately produce the webpage, in html. I do not see directly the html describing the buttons.

I was wondering whether it is possible to capture directly the output of these JavaScript scripts so that I can manually change properties of individual objects on the plot.

But why? Yes, you’re correct - the HTML is not there when you just save a Bokeh document. But it’s there when you open it - which means that the embedded CSS, if you add it, will work just fine. CSS does not care where the HTML has come from.
Don’t look at the saved HTML, look at the HTML in the browser when you open the generated HTML.

Because if I can get a file that contains only html, it would be relatively easy to have total control over all the elements in the page. One could then for example easily change the colors on the different buttons in a checkboxbuttongroup.

My point is that you can already change whatever colors you want in HTML by using CSS.

Indeed, but it seems quite difficult to do.

It is most definitely not more complicated than doing so in HTML. What have you tried?

I have tried looking at the custom widget example ( Adding a custom widget — Bokeh 2.4.2 Documentation) however I am not able to follow the typescript code fully and this would probably be overkill.

A more sensible solution I guess would be to use the css_classes parameter of checkboxgroup but I am also a bit lost with this one too.

You don’t need custom widgets. You just need to embed CSS into your HTML template.
This page goes a bit into the details of templates: Embedding Bokeh content — Bokeh 2.4.2 Documentation
tl;dr: for bokeh serve the easiest way is to use directory structure, for standalone plots you can use save - - it accepts a template parameter.

all that one needs in the template is

<style>
.bk-root .bk-btn-default:nth-child(1){
color: #ff0000;    
}
.bk-root .bk-btn-default:nth-child(2){
color: #0000ff;    
}
</style>

to produce something like in the attached screenshot.

Screenshot_2020-06-17 Evo837×498 28.5 KB

Thanks for your help!