Using CSS with Python's Bokeh

I am attempting to create line breaks inside categorical x-axis labels that have very long strings, exactly like this question. The question is answered there, but I am having trouble making it work.

The Python part of the answer given is as follows:

main.py

from bokeh.plotting import ColumnDataSource, figure
from bokeh.models import LabelSet, FixedTicker
from bokeh.io import curdoc, show


factors = ["Some very long text stringnthat has now been cutna",
"Some very long text stringnthat has now been cutnb"]
y = [50, 40]

# arbitrary placeholders which depends on the length and number of strings
x = [0, 2]
x_label = [0.65, 2.65] # This is offset is based on the length of the string
y_label = [-2, -2] # offset under the plot

source = ColumnDataSource(
data=dict(factors=factors, x=x, y=y, x_label=x_label, y_label=y_label))

p = figure(x_range=(-1, 3), y_range=(0, 52))

p.circle(x='x', y='y', size=15, fill_color="orange", source=source)
p.xaxis.ticker = FixedTicker(ticks=x)

p.xaxis.major_label_text_font_size = '0pt' # turn off x-axis tick labels
# p.xaxis.major_tick_line_color = None # turn off x-axis major ticks
p.xaxis.minor_tick_line_color = None # turn off x-axis minor ticks

labels = LabelSet(x='x_label', y='y_label', text='factors', source=source,
level='overlay', render_mode='css', text_align='center')

p.add_layout(labels)

curdoc().add_root(p)


The CSS part of the answer looks like this:

styles.css

.bk-annotation-child
white-space: pre-wrap;
text-align: center;



Although I have a fair amount of experience with Python, I have none with CSS. How do I use the CSS file part?

My guess would be that it is something to do with the render_mode='css' part of LabelSet, but there is no direct reference to styles.css. Does it have to be in a specific directory?

render_mode='css'

LabelSet

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.