

In [1]:

    
from IPython.display import HTML
from bokeh.charts import Line
from bokeh.plotting import output_notebook, show, figure
from bokeh.resources import CDN

output_notebook(resources=CDN)









    




    
        
        
        
    
        
        BokehJS successfully loaded.

Demo of resizing

Run the cells one at a time. Initially you'll see a squashed up chart. The next cell will let you programatically set it's height.

NOTE: This does not work on vplot, hplot, or grid plot. Currently you can only resize individual plots.

Set height of 'chart'



In [2]:

    
line = Line(index=[1990, 1991, 1993, 1994], values=[1, 2, 3, 4], height=100)
show(line)
print(line.ref['id'])









    














    



ea654166-0b0c-4134-bc9b-eca710c5dee6



In [3]:

    
plot_height = 300
HTML("<script>Bokeh.index['%s'].model.set('plot_height', %d);</script>" % (line.ref['id'], plot_height))









    Out[3]:

Set height of 'figure'



In [4]:

    
p = figure(height=100)
p.line(x=[1990, 1991, 1993, 1994], y=[1, 2, 3, 4])
show(p)
print(p.ref['id'])









    














    



78ebb831-786c-4947-9c0a-81dea3bced50



In [5]:

    
plot_height = 200
HTML("<script>Bokeh.index['%s'].model.set('plot_height', %d);</script>" % (p.ref['id'], plot_height))









    Out[5]:

Set height on window resize



In [6]:

    
line2 = Line(index=[1990, 1991, 1993, 1994], values=[1, 2, 3, 4], height=100)
show(line2)
print(line2.ref['id'])









    














    



4c237334-1a5f-4717-bd0c-8d4ff96d9617

After running the following cell, the chart will not instantly change it's height. But if you change the size of your browser window, the chart will resize to a plot height of 400.



In [7]:

    
HTML("""
<script>
    Bokeh.$(window).resize(
        function(){
            Bokeh.index["%s"].model.set('plot_height', 400);
        }
    );
</script>
""" % (line2.ref['id']))









    Out[7]:

Responsive plots



In [8]:

    
responsive = Line(index=[1990, 1991, 1993, 1994], values=[1, 2, 3, 4], height=100, width=200)
show(responsive)
print(responsive.ref['id'])









    














    



8ef91903-73dc-481b-90fa-60e6d7d7c09d

After running the cell below, you will be able to resize the browser window and see the plot scale to fit it.



In [9]:

    
HTML("""
<script> 
    function resize_plot() {
        var containingDivWidth = Bokeh.$('.output_subarea').last().width(),
            plot = Bokeh.index["%s"].model,
            curWidth = plot.get('plot_width'),
            curHeight = plot.get('plot_height');
        aspectRatio = curWidth / curHeight;
        plotWidth = Math.max(containingDivWidth, 300); // This prevents the chart from getting too small.
        plotHeight = parseInt(plotWidth / aspectRatio);
        plot.set('plot_width', plotWidth);
        plot.set('plot_height', plotHeight);
    }
    Bokeh.$(window).resize(resize_plot);
    resize_plot();
</script>
""" % (responsive.ref['id']))









    Out[9]:

Note, in your useage, you will probably have a different way of getting the "containingDivWidth." You just need a way to get the width of the div that the plot is living in. In an ipython notebook, it always lives in an output_subarea, so we can just use that.



In [10]:

    
# A little kicker to get nbviewer to run resize_plot 
HTML("<script>Bokeh.$(window).ready(resize_plot);</script>")









    Out[10]: