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

Answer 1

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.

Answer 2

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.