Grid

<Grid cols=2>
    <LineChart data={orders_by_category} x=order_month y=orders/>
    <BarChart data={orders_by_category} x=order_month y=orders fillColor=#00b4e0/>
    <ScatterPlot data={orders_by_category} x=order_month y=orders fillColor=#015c08/>
    <AreaChart data={orders_by_category} x=order_month y=orders fillColor=#b8645e lineColor=#b8645e/>
</Grid>

Group Component

To include multiple items inside one grid cell, use the Group component to wrap the items you want to include in that cell.

For example:

Some text

<Grid cols=2>
    <LineChart data={orders_by_category} x=order_month y=orders/>
   <Group>
      Some text
    <BarChart data={orders_by_category} x=order_month y=orders fillColor=#00b4e0/>
   </Group>
</Grid>

This will stack "some text" above the bar chart, rather than giving it it's own cell.

Options

cols

Number of columns in the grid on a full size screen

Options:

Default:: 2

gapSize

Space between grid elements

Options:

Default:: md