Home » Javascript » How to trigger BokehJS plot resize upon jquery-ui resize event?

How to trigger BokehJS plot resize upon jquery-ui resize event?

Posted by: admin November 1, 2017 Leave a comment


I am trying to use BokehJS in a simple html page containing a div id="myMenu" that is made resizable using jquery-ui. I would like that the div id="myPlot" containing a BokehJS plot is dynamically resized to fill the rest of the window.

In the following example (which is the best I could get so far), despite using sizing_mode:'stretch_both' the only way I can trigger BokehJS plot resize is by manually resizing the web browser window.

Is it possible to trigger a BokehJS plot resize using javascript? What would be the function to be used? The plan would then be to use that function in a custom jquery-ui resize event handler.

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.js"></script>
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.10.js"></script>
    <!-- The order of CSS and JS imports above is important. -->

    <div style="display:table; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
        <div style="display:table-row; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
            <div id="myMenu" style="display:table-cell; width:25%; vertical-align:top; height:100%; margin:0px; border:0px; border-right:1px solid grey; padding:0px;">
            <div id="myPlot" style="display:table-cell; height:100%; margin:0px; border:0px; padding:0px;"></div>
    <script type="text/javascript">
    // data to plot
    var source = new Bokeh.ColumnDataSource({
        data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] }

    // make the plot and add some tools
    var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";

    var plot = Bokeh.Plotting.figure({
        title:"demo plot",
        tools: tools,

    var scatterData = plot.line({ field: "x" }, { field: "y" }, {
        source: source,
        line_width: 2

    // Show the plot, appending it to the end of the current
    // section of the document we are in.

    //resizable left menu container