How to automatically adjust Bokeh plot size to the screen size of device used

Question

I am using inline embedding to add a Bokeh plot to my web page. I would like to adjust its size when viewed from different devices, e.g. mobile, tablet, etc. but can't figure out how to do so.

In my HTML, I've wrapped the Bokeh plot within a Bootstrap div with class "col-lg-4". While the div adjusts correspondingly to screen size, the Bokeh plot just ends up spilling over horizontally outside the div and the screen view. Is there a way to resolve this?

Here's a snippet from my HTML page with the plot embedding:

<div class="col-lg-4"><div class="well" style="text-align: center"><p>
{% if script != None %}
{{ div | safe}} 
{% endif %}
</p></div></div>

and the corresponding Bokeh plotting function:

def plotreg(beta, alpha, xreturn, yreturn):
    x = np.arange(-0.2, 0.3, 0.01)
    y = alpha + beta*x
    p = figure(width=700,height=350)
    p.line(x, y, line_dash="4 4", line_width=1.5, color='gray')
    p.circle(xreturn, yreturn, fill_color="grey", size=6, hover_fill_color="firebrick",
    fill_alpha=0.05, line_color = "firebrick", hover_alpha=0.3)
    p.xaxis.axis_label = "Market Return"
    p.yaxis.axis_label = "Stock Return"
    p.outline_line_width = 5
    p.outline_line_alpha = 0.3
    p.outline_line_color = "navy"
    comp = components(p)
    return comp

Kalimantan · Accepted Answer · 2018-01-23T19:04:13.770

16

Bokeh charts has a responsive attribute. So you should be able to do p = figure(width=700,height=350, responsive=True)

Bokeh 0.12.10 or After As @Alex Pointed out. The responsive parameter was deprecated in Bokeh 0.12.10. Use sizing_mode='fixed' for responsive=False or sizing_mode='scale_width' for responsive=True instead.

edited Jan 23 '18 at 19:04

answered Aug 16 '16 at 16:31

Kalimantan

702
1
9
28

Ahh yes! That's what I was looking for, thank you :) – maria saz Aug 16 '16 at 16:35
Would you know how to also adjust the legend table size? At the moment, it ends up covering the entire plot when viewed from a smaller screen.. – maria saz Aug 16 '16 at 16:40
No, but you can put the legend outside the "plot area" now – bigreddot Aug 16 '16 at 16:48
yeah you can do p.legend.legend_spacing = 10// for spacing p.legend.legend_padding = 50// for padding. – Kalimantan Aug 16 '16 at 16:48
Yeah I think what @bigreddot suggested is better – Kalimantan Aug 18 '16 at 12:13
The responsive parameter was deprecated in Bokeh 0.12.10. Use `sizing_mode='fixed'` for `responsive=False` or `sizing_mode='scale_width'` for `responsive=True` instead. – Alex Jan 16 '18 at 21:46

Vito Gentile · Answer 2 · 2019-11-07T13:13:08.970

5

In addition to Kalimantan's answer, you can also use sizing_mode='stretch_both' in case you want the figure to automatically fit within its container window.

edited Nov 07 '19 at 13:13

answered Nov 07 '19 at 13:07

Vito Gentile

13,336
9
61
96

How to automatically adjust Bokeh plot size to the screen size of device used

2 Answers2