Having trouble with stretch_width

I’m fairly new to Bokeh.

I have a working app that creates a number of line charts and adds a text DIV on the right. Each plot+DIV pair are (effectively, as I don’t use row() ) a row.

ATM, everything is fixed width, but I’d like to make the plots responsive. Since the DIV is fine as it, I figured I’d add just add sizing_mode = “stretch_width” to the figure() method.

When I do that, the figure shrinks down to essentially(?) zero width regardless of the browser window size. I tried both with and without the width parameter in figure(). My final layout() only has a list of [figure, DIV] with no other params.

Is there a particular incantation I should be using?

HI @Steve_Raasch there’s not enough information here to speculate. There’s been various layout issues over the years, so we definitely have to know all relevant version information (it is always advised to provide version information with any and all OSS support questions, here or anywhere else). But really, we need a complete Minimal Reproducible Example to actually run and investigate, to be able to determine whether you are seeing a bug or some usage issue.

Appologies.

I’m running Bokeh 3.1.0

from bokeh.plotting import figure, show
from bokeh.layouts import layout

_width = 600

sm = "stretch_width"

p = figure(title="Test", width=_width, height=100,
           sizing_mode=sm)
p2 = figure(title="Test2", width=_width, height=100,
            sizing_mode=sm)

data = [0, 1, 2, 3]
data2 = [3, 2, 1, 0]

d = Div(text='This is the side text')

p.line(list(range(4)), data)
p2.line(list(range(4)), data2)

show(layout([p, d], [p2, d]))

With ‘sm’ set as in this code, both plots are reduced to essentially zero width. When ‘sm’ is None, they plot as you would expect.

While preparing this example, I noticed that for a single plot ‘show(p)’, the stretch seemed to work correctly. Given that I need more than one row, I reorganized to remove the layout() method:

from bokeh.plotting import figure, show
from bokeh.layouts import layout, row, column
from bokeh.models import Div

_width = 600

sm = None
sm = "stretch_width"

p = figure(title="Test", width=_width, height=100,
           sizing_mode=sm)
p2 = figure(title="Test2", width=_width, height=100,
            sizing_mode=sm)

data = [0, 1, 2, 3]
data2 = [3, 2, 1, 0]

d = Div(text='This is the side text')

p.line(list(range(4)), data)
p2.line(list(range(4)), data2)

l = column(row(p, d), row(p2, d))
show(l)

Unfortunately, I got the same result as my previous attempt.

I’m certain I’m just missing something fundamental, but I can’t quite find it.

@Steve_Raasch There have been lots of different layout issues and challenges over the years. First things first, please try things out with latest 3.4.1 in case this is just a bug that has already been fixed.

Updated to 3.4.1.

No change in behavior.

Try passing the sizing_mode argument in the column object instead and see what happens. Like this:

from bokeh.plotting import figure, show
from bokeh.layouts import layout, row, column
from bokeh.models import Div

_width = 600

sm = None
sm = "stretch_width"

p = figure(title="Test", width=_width, height=100)
p2 = figure(title="Test2", width=_width, height=100)

data = [0, 1, 2, 3]
data2 = [3, 2, 1, 0]

d = Div(text='This is the side text')

p.line(list(range(4)), data)
p2.line(list(range(4)), data2)

l = column(row(p, d), row(p2, d), sizing_mode=sm)
show(l)

Thanks for your idea… it didn’t work out, but it did lead me to a fix.

It would appear that the sizing_mode doesn’t work with the column() layout method. However grid() does work:

from bokeh.plotting import figure, show
from bokeh.layouts import row, grid
from bokeh.models import Div

sm = "stretch_width"

p = figure(title="Test", height=100, sizing_mode=sm)
p2 = figure(title="Test2", height=100, sizing_mode=sm)
  
data = [0, 1, 2, 3]
data2 = [3, 2, 1, 0]
  
d = Div(text='This is the side text')
  
p.line(list(range(4)), data)
p2.line(list(range(4)), data2)
  
l = grid([row(p, d), row(p2, d)], sizing_mode=sm)
show(l)

removing the sizing_mode from either the figure() or grid() method breaks things.

Thanks for the help!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.