Skip to content
Advertisement

Switching plots with radio button screws up the format

I am trying to do something relatively simple. I want to create a radio button that switches between two plotting formats. The radio button switches between two options. Let us call them ‘a’ and ‘b.’

When ‘a’ is selected, I want to plot two figures side by side using bootstrap row/col. When option ‘b’ is selected, I want to use the entire column for a single figure.

I believe I coded that correctly below, but when I switch from ‘a’ to ‘b’ and back to ‘a’, the plot screws up the plot and the two figures show up vertically.

JavaScript

Here are the screenshots: enter image description here

Advertisement

Answer

The default behavior for dbc.Col components filling up a dbc.Row component is a horizontal alignment, so I can see the confusion here. However, the default size of column components is 12. And if you’re trying to put two components of that size next to eachother will cause an overflow, and the columns will be stacked on top og eachother. Therefore, a possible solution is to set width = 6 for the columns in your first return statement. Or other numbers that do not sum to more than 12:

Solution

JavaScript

Below are a few images from a test run. You’ll find a complete code snippet at the end of the answer

Output 1: radio = a

enter image description here

Output 2: radio = b

enter image description here

Output 1: radio = a again

enter image description here

Complete code:

JavaScript
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement