Bokeh plots render on top of each other when layouts put into tabs

Question

I have a dictionary containing lists of bokeh figures. I am calling these and placing 2 plots on a layout and putting them into 3 or 4 tabs.

When I open the document each tab looks like it only has one plot, but you can tell there is a second plot behind it from the toolbar and sometimes you can see small parts of the second plot.

When I just show(layout) it looks fine, it is only when I try to have the layout within a tab that it does not render correctly.

I have re created the problem how I have it set up. The below is a little long, but I want to have a complete example. The first part is just creating all of the plots. Please notice the directory path that will need to be changed.

from bokeh.charts import Bar, output_file, show, BoxPlot, Histogram, Scatter
from bokeh.sampledata.autompg import autompg as df
from bokeh.models.widgets import Tabs, Panel
from bokeh.layouts import layout
import os
directory = r'/Users/user/bokehApp'


bar = []
p = Bar(df, 'cyl', values='mpg', title="Total MPG by CYL")
bar.append(p)
p = Bar(df, label='yr', values='mpg', agg='mean',
        title="Average MPG by YR")
bar.append(p)
p = Bar(df, 'yr', values='displ',
        title="Total DISPL by YR", bar_width=0.4)
bar.append(p)
p = Bar(df, 'yr', values='displ',
        title="Total DISPL by YR", color="wheat")
bar.append(p)

box = []
p = BoxPlot(df, values='mpg', label='cyl',
            title="MPG Summary (grouped by CYL)")
box.append(p)
p = BoxPlot(df, values='mpg', label=['cyl', 'origin'],
            title="MPG Summary (grouped by CYL, ORIGIN)")
box.append(p)
p = BoxPlot(df, values='mpg', label='cyl', color='#00cccc',
            title="MPG Summary (grouped by CYL)")
box.append(p)
p = BoxPlot(df, values='mpg', label='cyl', color='cyl',
            title="MPG Summary (grouped and shaded by CYL)")
box.append(p)
hist = []
p = Histogram(df['mpg'], title="MPG Distribution")
hist.append(p)
p = Histogram(df, 'hp', title="HP Distributioan")
hist.append(p)
p = Histogram(df, values='displ', title="DISPL Distribution")
hist.append(p)
p = Histogram(df, values='mpg', bins=50,
              title="MPG Distribution (50 bins)")
hist.append(p)
scat = []
p = Scatter(df, x='mpg', y='hp', title="HP vs MPG",
            xlabel="Miles Per Gallon", ylabel="Horsepower")
scat.append(p)

The above is all of the plots that I took from the high level charts page, the below is the problem.

dataDict = {'Bar': bar, 'Box': box, 'Hist': hist, 'Scat': scat}

plots = ['Bar', 'Box', 'Hist']

for plt in plots:
    plotFig = dataDict[plt]
    tabList = [plotFig[0:2],plotFig[2:4]]
    tabTitle =['tab1', 'tab2']
    panel = []
    output_file(os.path.join(directory, plt+'.html'), title = plt + 'plots', autosave = False, mode = 'cdn', root_dir = None)
    for tab, title in zip (tabList, tabTitle):
        l = layout(children = [
                   tab], sizing_mode = 'scale_width')
        t = Panel(child = l, title = title)
        panel.append(t)
    tabs = Tabs(tabs = panel)
    show(tabs)

Thanks

Answer 1

When I changed the above sizing_mode = 'scale_width' to sizing_mode = 'fixed' it rendered correctly.

Answer 2

Not 100% certain from your description what you mean by "on top of" in this case. But Bokeh maintains an implicit "current document" which gets accumulated to. If you don't want this (e.g. because you are creating and saving different plots in a loop) then you can:

• manage documents and adding things to them explicitly yourself, see e.g. https://github.com/bokeh/bokeh/blob/master/examples/models/glyph1.py

• try using reset_output between calls to show:

  from bokeh.io import reset_output
  for p in plots:
      reset_output()
      # stuff, create plots and put them in Tabs
      show(tabs)