I have a main Figure and a list of other figures in a list called main_plot. Each plot is connected to the first one to have the same x-asis zoom with x_range=main_plot.x_range
What i would like to achieve is to have a checkbox, and if it is checked I would like to show additional plots.
So far I have a working code based on an example: Bokeh: Widget to Show/Hide Figures
Here the response uses a column() function, I was able to implement it:
toogle_subplots = generate_additional_subplots(main_plot)
final_grid += toogle_subplots
col = column()
checkbox = CheckboxGroup(labels=["Plot"],
active=[0], width=100)
callback = CustomJS(args=dict(plots=toogle_subplots, col=col, checkbox=checkbox), code="""
const children = []
for (const i of checkbox.active) {
for (const j of plots) {
children.push(j)
}
}
col.children = children
""")
checkbox.js_on_change('active', callback)
final_grid += [checkbox, col]
grid = layout(final_grid, sizing_mode='stretch_width')
However, in my case, I work with grid, and not columns, and for some reason the plots inside the column are wider that the normal. In the example above I want to add toogle_subplots which is a list of Figures to the grid if the checkbox is checked. It works, but as I add toogle_subplots to the Layout without the JS callback, their width is different.
Picture:
The two rows above the checkbox and the two below are the Figures inside toogle_subplots, and they have a different width. Their behavior is good, they follow the zoom and pan of the main plot.
Is there an easier solution to this problem?
