LabelSet not able to override font

Community Support
,
1

Hello everyone,

I do not see the point of creating a minimal example to expose my current challenge.
I have a project in Flask that I’m using Bokeh 3.3.0 to do the visualization.
After inspecting the HTML I found the elements that I needed to insert in the styles.css which are the following:

:host {
    --base-font: var(--bokeh-base-font, Aptos, Arial, sans-serif);
    --mono-font: var(--bokeh-mono-font, monospace);
  }

I have all the fonts installed for all users in the system. When I use only models.Label it will assume the font and it won’t be an issue, once I use models.LabelSet which is more feasible, it won’t assume the font, either override with the .css file.
I tried converting Bokeh to JS with components and CDN, in both cases, this happens.
Any suggestion will be very welcome, for now, I will do it the hard way and create several Labels.

image
image1129×403 15.5 KB

In the image above, the central rects are with LabelSet the ones above and below are with Label. Ye can see the difference in the font. This is a dynamic dashboard, so LabelSet would really make the job more practical.

2

Bokeh plot components nearly all render to the HTML or WebGL canvas, which are opaque raster drawing arrays that are not affected in any way by CSS. There is currently no expectation that anything rendered to the canvas will respond to CSS. [1] I am not actually sure why Label would be doing so, in fact.

There is ongoing work to have Bokeh manually make effort to observe CSS and update its internal canvas elements appropriately when possible, but it’s probably at least a few releases away. For now, you would need to programmatically update the font, e.g. by setting the text_font property on the Bokeh objects directly from Python or JavaScript code.

cc @mateusz for any additional context.

  1. The CSS applies to various non-canvas DOM objects, e.g. widgets and layouts. ↩︎

3

Thanks for your reply. Yeah, I made a mistake when saying converting to JS, but you clarified it by talking about raster drawing.
I am setting it directly to the LabelSet

font = 'Aptos'
labels = LabelSet(x='x_dept', y='y_dept', text='Department', x_offset=-25, y_offset=18, source=src1, text_font_size='15px',  text_font=font, text_color='#000', text_alpha=1, text_align='center')

lb_m1 = Label(x=5.1, y=.585, text='Medicamentos', angle=0, text_font_size='14px', text_font=font, text_color='#000', text_alpha=1, text_align='center', level='glyph')

Even so, it is not assuming the font I set, this is why I tried .css files, which will not affect the outcome of a canvas as you mentioned.
Label though does accept the font.

4

@Reinhold83 Any font that is built-in, or loaded explicitly by you into the page should be usable on the canvas. You can see information about how to load fonts in this topic:

If you are saying that you are loading your font, but it is still not working, then all I can suggest is to make a GitHub Issue with a complete Minimal Reproducible Example.

5

Thanks for your reply. I just created a for loop to add the labels directly, and a few conditions depending the quantity. I will investigate it further in near future, and perhaps open a new post.
Anyhow just to let ye know, Bokeh is a great tool. Well done all of ye.

image
image1104×409 18.6 KB

1 Like