Bento box

The bento box is a way for the user to group charts together with a more fine tuned way of managing the sizes of the components. To group the charts the function s.plt.set_bentobox must be used, and to stop grouping the elements the user has to call the function s.plt.pop_out_of_bentobox. When defining the bento box the cols size and rows size can be defined which will will set the size of the bentobox in the main grid.

Some behavior considerations:

  • The bento box has it's own grid, and this grid has a different distribution to the main grid:

    • 24 columns - NO gap

    • Row size 16 px height - NO gap

  • If components do not define the rows_size parameter, they will have:

    • Indicators components will have, by default, eight rows.

    • Other components will have, by default, 14 rows.

  • If components do not define the cols_size parameter, they will have:Indicators comps will have, by default, 12 cols.

    • Other components will have, by default, 24 cols.


s.plt.set_bentobox(cols_size=8, rows_size=3)

indicator_data = {
    "description": "",
    "title": "State",
    "value": "Open",

    data=indicator_data, order=0,
    rows_size=8, cols_size=12,

    data=indicator_data, order=1,
    rows_size=8, cols_size=12,
        {'date':, 1, 1), 'x': 5, 'y': 5},
        {'date':, 1, 2), 'x': 6, 'y': 5},
        {'date':, 1, 3), 'x': 4, 'y': 5},
        {'date':, 1, 4), 'x': 7, 'y': 5},
        {'date':, 1, 5), 'x': 3, 'y': 5},
    x='date', order=2, rows_size=24, cols_size=24,


And create stuff such as:

Last updated