Chart not resize correctly on windows resize

[iisri-vu]

Hi all, I'm using bokeh charts with python Flask to create a dashboard.

I set the chart sizing_mode="stretch_both" to fill the parent div. It fills the parent div dimension correctly on loading.

But when I double click to change the browser window size, the chart does not resize correctly. Sometimes it shrink in height. I need to switch back and forth between tabs for the chart the resize correctly. I can also slightly drag to resize the window and the chart would resize to the correct height to fit the parent div height.

See picture below:

Is there anyway to force a resize or update size event for all the charts to fill totheir parent container height?

[bryevdv]

@iisri-vu please provide all the information that was requested from you in the issue template:

https://github.com/bokeh/bokeh/blob/branch-2.4/.github/ISSUE_TEMPLATE/bug_report.md

We can't do anything without version, platform imformation and a complete Minimal Reproducible Example.

[vutle]

I'm using python 3.8.7, Bokeh 2.3.3 both python and javascript on Windows 10. I tested the behaviour on Chrome 91.0.4472.124, Edge Browser 91.0.864.70 and firefox 89.0.2. They all have this problem. See below gif. After resize window, The chart shrink in height. I need drag to resize the browser window, then the chart changes height.

I'm using bulma container, but I don't think that is the issue as its tile resizes correctly without the chart.

[bryevdv]

@bryevdv Please provide a complete Minimal Reproducible Example. We absolutely need to have the exact code used to reproduce the exact problem, without speculation.

[iisri-vu]

This is the code workflow. #python...

def plot_dwelltime_histogram_chart(df):

    n_df = df[df.columns[1]].to_numpy()
    mtitle = "User dwell time histogram"
    xlabel = "xtitle"
    hist, edges = np.histogram(n_df, density=False, bins=20)
    tool_tip = HoverTool(tooltips=[("Duration", "@left{int}"), ("Tally", "@top")])

    p = figure(title=mtitle, sizing_mode="stretch_both")
    p.quad(top=hist, bottom=0, left=edges[:-1], right=edges[1:], width=0.8, line_color=None)

    p.toolbar.autohide = True
    p.xaxis.axis_label = xlabel
    
    p.yaxis.formatter.use_scientific = False

    p.yaxis.axis_label = "Tally"
    p.yaxis.axis_label_text_font_style = 'bold'
    p.xaxis.axis_label_text_font_style = 'bold'

    p.y_range.start = 0
    
    p.add_tools(tool_tip)
    script, div = components(p)
    return (script, div)

@dashboard.route('/createchart', methods= ['POST'])
def create_chart():
    if request.method == 'POST':
        #some df..
        chart = plot_dwelltime_histogram_chart(df)
        response = jsonify({'chart': chart })
        return response

---

html side ajax:
/// Then add chart to div when response success. div.html(chart);

[bryevdv]

@iisri-vu Apologies if I am not being clear in the requirements. For something like this, we need a complete example that is runnable, as-is with no modifications, in order to reproduce. It should have all imports, templates, data files (or synthetic data), everything that is needed to run, ready to go. We have to be a able to actually run something to investigate, and you need to to provide that something.

[iisri-vu]

Hi bryevdv,

I have attached the flask runnable below. Click the button to get 4 charts. If you double click to change window size from normal to max then back to normal size, it will have resize issue. Also if you drag to resize the windows, the chart is not resize correctly. Thanks

bokeh resize issue.zip

[iisri-vu]

I tested this on windows 10 and windows server 2019 using Edge, Chrome, Firefox and IE. The only way I fix it is to add the chart into the div after window resize event. It then resize the chart back into the tile, but there is a momentary jump. Maybe it is better to call chart resize event.