Trying to center a bokeh plot in a notebook cell like holoviews does.
Using the align keyword when creating the figure didn’t work.
Here is an example from the docs:
Thanks for the amazingly quick response! Also, thanks for the awesome project and community support.
I’ve been browsing through the source for holoviews to figure it out, but haven’t found it yet. I was hoping it was something simple and obvious I was overlooking.
I found a couple of work arounds shared below. I do still wonder if the align=center attribute is not being properly respected/handled.
One approach is to output to HTML and wrap in a <center> tag.
from bokeh.resources import CDN
from bokeh.embed import file_html
from IPython.display import display, HTML
html = file_html(p, CDN, theme="dark_minimal")
HTML("<center>{}</center>".format(html))
Another approach is to use panel:
import panel as pn
pn.extension()
pn.Row(pn.layout.HSpacer(), p, pn.layout.HSpacer())
I suspect there are other, possibly better, ways to accomplish this, so I would appreciate any other ideas or suggestions.
I only just noticed your passing that to figure. I would not expect that to work. As the docs state it centers within the parent container, which in this case I am fairly sure has tight bounds. So, basically a no-op. That property has very narrow applicability, perhaps it should have been private, or had a less friendly name.
I would expect any solution to involve CSS as above, or spacers. AFAIK you could try that solution with Bokeh’s row and Spacer without Holoviews.
Edit: align=centermight work if you do that with the plot as single child inside a row that has a responsive sizing mode specified.