Grid Component

Section 1

	

		
					
		
		
<Grid columns=3 gapWidth=10>
    <LineChart data={mock_data}/>
    <BarChart data={mock_data}/>
    <DataTable data={mock_data}/>
</Grid>
		

Section 2

	

		
					
		
		
<Grid columns=2>
    <LineChart data={mock_data}/>
    <BarChart data={mock_data}/>
</Grid>
		

Group Component

The Group component lets you include multiple items inside a grid cell. This is helpful if you want to include markdown along with a chart, for example.

One note is that the markdown requires specific line spacing to work correctly, which can be unintuitive. Generally it requires a blank line before and after a markdown item.

Section 3

	

		
					
		
		
<Grid columns=3>
    <Group>

        ### Line
        This is a line chart

        <LineChart data={mock_data}/>
    </Group>

    <Group>

        ### Bar
        This is a bar chart

        <BarChart data={mock_data}/>
    </Group>

    <Group>

        ### Area
        This is an area chart

        <AreaChart data={mock_data}/>
    </Group>
</Grid>