Grid

Loading...
Loading...
Loading...
Loading...
<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:

<Grid cols=2>
   <LineChart/>
   <Group>
      Some text
      <BarChart/>
   </Group>
</Grid>

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

Options

Number of columns in the grid on a full size screen
Options:
Default:
2
Space between grid elements
Default:
md