Small Multiple

Use a small multiple to display a series of similar graphs or charts using the same scale and axes. A small multiple can be created by using the grid, loop and query functions option in combination with a unique list of horizontal and vertical axes.

1. Define unique lists for axes
2. Define grid
3. Define loops for horizontal and/or veritical grid
4. Filter chart value with query function

Example

<Grid cols=3 gapSize=lg>
{#each categories as category}

<LineChart 
    data={orders_by_category.where(`category = '${category.name}'`)}
    x=month
    y=sales_usd0k 
    yAxisTitle="Sales per Month"
    title="Monthly Sales"
    subtitle="{category.name}"
/>
{/each}
</Grid>