Small multiples
Compare series in aligned panels with independent scales.
Chart ID: smallMultiples. Independent import: @revolist/charts/small-multiples.
Live example
Section titled “Live example”Loading chart…
Reading the chart
Section titled “Reading the chart”Compare separate series in individual panels. Independent scales emphasize each local trend; shared scales support direct magnitude comparisons between panels.
Data requirements
Section titled “Data requirements”Use one category per row and one or more numeric series. Values are finite numbers or explicit nulls; the row mapper does not group or aggregate repeated keys.
The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.
| Data role | Field count |
|---|---|
category | 1 or more |
value | 1 or more |
series | 1 or more |
Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.
Create this chart
Section titled “Create this chart”Install the package using the installation guide, give the host an explicit height, and call createSmallMultiplesChart after the host mounts. This factory fixes the chart type to smallMultiples.
<div id="chart" style="width: 100%; height: 450px;"></div>Complete runnable TypeScript example with sample data
import { createSmallMultiplesChart } from '@revolist/charts/small-multiples';
const container = document.getElementById('chart')!;const chart = await createSmallMultiplesChart({ container, "dataset": { "revision": 0, "source": "client", "categories": [ { "id": "preview-category-0", "label": "Jan", "path": [ "Jan" ], "labels": [ "Jan" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-1", "label": "Feb", "path": [ "Feb" ], "labels": [ "Feb" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-2", "label": "Mar", "path": [ "Mar" ], "labels": [ "Mar" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-3", "label": "Apr", "path": [ "Apr" ], "labels": [ "Apr" ], "depth": 1, "kind": "leaf" } ], "series": [ { "id": "preview-series-0", "label": "Current", "columnPath": [ "Current" ], "labels": [ "Current" ], "kind": "leaf", "prop": "preview-0" }, { "id": "preview-series-1", "label": "Previous", "columnPath": [ "Previous" ], "labels": [ "Previous" ], "kind": "leaf", "prop": "preview-1" } ], "values": [ [ 18, 29 ], [ 44, 27 ], [ 31, 45 ], [ 62, 50 ] ], "analyticalFrame": { "fields": [ { "id": "pivot:category", "label": "pivot:category", "role": "dimension", "semanticType": "category" }, { "id": "pivot:series", "label": "pivot:series", "role": "dimension", "semanticType": "category" }, { "id": "preview-series-0", "label": "Current", "role": "measure", "semanticType": "number", "sourceField": "preview-0" }, { "id": "preview-series-1", "label": "Previous", "role": "measure", "semanticType": "number", "sourceField": "preview-1" } ], "observations": [ { "id": "[\"preview-category-0\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Jan", "label": "Jan", "path": [ "Jan" ], "labels": [ "Jan" ] }, "pivot:series": { "value": "Current", "label": "Current", "path": [ "Current" ], "labels": [ "Current" ] } }, "measures": { "preview-series-0": 18 } }, { "id": "[\"preview-category-0\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Jan", "label": "Jan", "path": [ "Jan" ], "labels": [ "Jan" ] }, "pivot:series": { "value": "Previous", "label": "Previous", "path": [ "Previous" ], "labels": [ "Previous" ] } }, "measures": { "preview-series-1": 29 } }, { "id": "[\"preview-category-1\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Feb", "label": "Feb", "path": [ "Feb" ], "labels": [ "Feb" ] }, "pivot:series": { "value": "Current", "label": "Current", "path": [ "Current" ], "labels": [ "Current" ] } }, "measures": { "preview-series-0": 44 } }, { "id": "[\"preview-category-1\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Feb", "label": "Feb", "path": [ "Feb" ], "labels": [ "Feb" ] }, "pivot:series": { "value": "Previous", "label": "Previous", "path": [ "Previous" ], "labels": [ "Previous" ] } }, "measures": { "preview-series-1": 27 } }, { "id": "[\"preview-category-2\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Mar", "label": "Mar", "path": [ "Mar" ], "labels": [ "Mar" ] }, "pivot:series": { "value": "Current", "label": "Current", "path": [ "Current" ], "labels": [ "Current" ] } }, "measures": { "preview-series-0": 31 } }, { "id": "[\"preview-category-2\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Mar", "label": "Mar", "path": [ "Mar" ], "labels": [ "Mar" ] }, "pivot:series": { "value": "Previous", "label": "Previous", "path": [ "Previous" ], "labels": [ "Previous" ] } }, "measures": { "preview-series-1": 45 } }, { "id": "[\"preview-category-3\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Apr", "label": "Apr", "path": [ "Apr" ], "labels": [ "Apr" ] }, "pivot:series": { "value": "Current", "label": "Current", "path": [ "Current" ], "labels": [ "Current" ] } }, "measures": { "preview-series-0": 62 } }, { "id": "[\"preview-category-3\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Apr", "label": "Apr", "path": [ "Apr" ], "labels": [ "Apr" ] }, "pivot:series": { "value": "Previous", "label": "Previous", "path": [ "Previous" ], "labels": [ "Previous" ] } }, "measures": { "preview-series-1": 50 } } ], "matrixCells": [ { "categoryId": "preview-category-0", "seriesId": "preview-series-0", "observationId": "[\"preview-category-0\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-1", "observationId": "[\"preview-category-0\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-0", "observationId": "[\"preview-category-1\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-1", "observationId": "[\"preview-category-1\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-0", "observationId": "[\"preview-category-2\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-1", "observationId": "[\"preview-category-2\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-0", "observationId": "[\"preview-category-3\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-1", "observationId": "[\"preview-category-3\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" } ] } }, "bindings": {}, "presentation": { "dataLabels": false }});
// When the host unmounts:// chart.destroy();Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.
Supported options
Section titled “Supported options”Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.
| Option | Default | Accepted values |
|---|---|---|
showGridLines | true | true or false |
markOpacity | 1 | 0.2 to 1; step 0.05 |
strokeWidth | 2 | 1 to 6; step 0.5 |
facetScaleMode | independent | shared, independent |
Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.
Facet by a dimension
Section titled “Facet by a dimension”A facet splits the dataset by a real analytical-frame dimension. Discover the available field IDs rather than guessing a display label:
import { getChartFacetDimensions } from '@revolist/charts/core';
const dimensions = getChartFacetDimensions(chart.getDataset());// Populate your dimension selector from these descriptors.if (dimensions.length) { await chart.update({ chartType: 'smallMultiples', facets: { dimension: dimensions[0].id, type: 'column', scaleMode: 'shared', pageSize: 6, page: 0, }, });}Register smallMultiplesChart from @revolist/charts/small-multiples in your
standalone factory before changing the chart type. The native Pivot renderer
uses the same facet settings; its row hierarchy supplies dimension descriptors.
Explicit analytical frames can supply additional dimensions and matrix-cell
mappings. The requested dimension must exist on each mapped source observation.
type supports line, bar, column, and area. Shared scales allow magnitude
comparisons and consider panels on other pages. Independent scales emphasize
each group’s shape and require closer attention to axis labels. Omit dimension
to keep one panel per measure. The renderer adapts panel capacity to the host;
pageSize is an upper bound, and accessible previous/next controls keep the
remaining panels reachable. Source selection and CSV identities remain canonical.
See Analysis for choosing a comparison and Chart Analysis API for options.
Related charts
Section titled “Related charts”- Line — Show change and trends across an ordered axis.
- Smooth line — Show trends with a smooth curve through each value.
- Stepped line — Show values that remain constant between categories.
- Annotated time series — Highlight notable points along an ordered time trend.