Bokeh plot doesn't use entire space available

Panel
,
1

I’ve created a simple example where I plot a scatter plot with random points alongside a button that refreshes the plot with new data points. The layout uses GridSpec such that the Bokeh plot takes up 3/4 of the horizontal space, while the button gets the remaining 1/4. When I launch the script with panel serve the Bokeh plot doesn’t use all of the space that’s available. Only after refreshing the data a couple of times does it use all of the available space:

Am I doing something wrong, or is this normal behaviour? I want the Bokeh pane to use all of the available space from the moment it’s rendered.

The code I used can be found below:

from numpy.random import default_rng
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
import panel as pn

rng = default_rng()

def calculate_coordinates():
   x_coordinates = rng.standard_normal(10)
   y_coordinates = rng.standard_normal(10)

   return {"x": x_coordinates, "y": y_coordinates}

data = calculate_coordinates()
source = ColumnDataSource(data)

def refresh_data(event):
   new_data = calculate_coordinates()
   new_source = ColumnDataSource(new_data)
   source.data.update(new_source.data)

plot = figure()
plot.sizing_mode = "stretch_both"

plot.circle(x="x", y="y", source=source)

button = pn.widgets.Button(name="Replot", button_type="primary", sizing_mode="stretch_both")
button.on_click(refresh_data)

grid = pn.GridSpec(sizing_mode="stretch_both")
grid[0, 0:3] = pn.pane.Bokeh(plot)
grid[0, 3] = button

grid.servable()
2

I think what you’re experiencing is due to the labels on the y-axis taking up a variable amount of space. When you have a label with a decimal point it is a bit wider and takes up plotting real estate.

You can try fixing axis limits to mitigate this:

plot = figure(x_range=(-5,5), y_range=(-5,5))
3

It looks like a label change is what triggers the plot to fully occupy the available space. With your suggestion my plot never expands to use the entire available space, there’s always some space between the button and the plot no matter how many times I recalculate the data.

4

Ahh, I see. My bad. Should have tested on my end before responding :slight_smile: I am unsure what a fix could be - this seems like a bug. Resizing to actually fill the space happens if you force a resize in any way - opening the browser tools, resizing the window, etc.

1 Like
5

I filed an issue in the Panel repo on Github: Bokeh plot uses more space than is available · Issue #4922 · holoviz/panel · GitHub

In that example I managed to make the Bokeh plot use more space than is available.

1 Like
6

In the meantime some jank you can use is deferring the configuring of the GridSpec until after the page is loaded.

grid = pn.GridSpec(sizing_mode="stretch_both")
def on_load():
    grid[0, 0:3] = pn.pane.Bokeh(plot)
    grid[0, 3] = button
pn.state.onload(on_load)
7

This is great. Thanks! =)

1 Like