Overview
The MultiStatsCard block groups multiple metrics — each with its own title, value, trend, and optional sparkline — into a single visually unified card. Unlike stacking several Stat Card blocks, a Multi Stats Card communicates shared visual weight: the metrics belong together and should be read in relation to each other.
Common use cases include pairing revenue with cost and profit, showing web traffic alongside conversion and bounce rates, or comparing current month metrics against the previous month across multiple KPIs simultaneously.
Note: Use separate Stat Cards when each metric is independently important and you want flexible responsive layout control. Use Multi Stats Card when the metrics share a semantic grouping and you want them to always appear together in one block.
The Stats Array
The core of the block is the stats array — one object per metric cell. Each object in the array defines one metric panel within the card:
| Field | Type | Required | Description |
| title | string | Required (required) | The metric label. Rendered in small muted text above the value. |
| value | string | number | Required (required) | The primary metric value. Displayed prominently. |
| unit | string | Optional (optional) | Unit suffix appended after the value in smaller text (e.g. "%", "ms"). |
| trend | object | Optional (optional) | Per-metric trend: { value: number, direction: "up" | "down" | "neutral" }. Rendered as a small directional badge below the value. |
| sparklineData | number[] | Optional (optional) | Array of historical data points to render as a mini sparkline chart below the metric. Typically 7–30 data points. Requires showSparklines = true at the block level. |
Block-Level Properties
| Property | Type | Default | Description |
| stats | array (bindable) | Sample stats | The array of metric objects. Bind to a query result, variable, or static array. Supports 2–4 items; more than 4 truncates to 4. |
| layout | enum: grid | list | split | grid | grid: items arranged in a CSS grid by columns count. list: items stacked vertically with a divider. split: two panes separated by a vertical rule (works best with exactly 2 items). |
| columns | 2 | 3 | 4 | 2 | Number of columns in grid layout. Ignored for list and split layouts. On mobile widths, collapses to 1 column regardless of this setting. |
| showSparklines | boolean | false | Render a mini sparkline chart below each metric. Requires sparklineData to be populated on each stats object. |
| sparklineColor | color | brand | The line color for all sparklines in the card. For per-metric sparkline colors, use the per-stat sparklineColor override. |
| cardPadding | enum: sm | md | lg | md | Inner padding of the card container. Increase to lg for spacious dashboard styles; reduce to sm for compact layouts. |
| loading | boolean (bindable) | false | Shows skeleton shimmer across all metric cells simultaneously. Bind to the data source's loading state. |
Layout Modes
Choose the layout based on the visual relationship between the metrics:
| Layout | Visual Structure | Best For |
| grid | Metrics in an equal-width grid — 2, 3, or 4 columns | Overview dashboards with 3–4 metrics of equal importance |
| list | Metrics stacked vertically with horizontal dividers | Sidebar panels, narrow layouts, metrics with longer labels |
| split | Two metrics side-by-side with a centered vertical divider | Before/After comparisons, Current vs Target, Period over Period |
Sparklines
When showSparklines = true, a mini line chart renders at the bottom of each metric cell using its sparklineData array. Sparklines have no axes, no labels — they are purely visual trend lines that complement the main value. The line color matches sparklineColor and the area fill is a 20%-opacity version of the same color.
Tip: Bind sparklineData to a filtered array expression, e.g. {{ ds_daily_revenue.data.filter(r => r.metricId === "revenue").map(r => r.value) }}. The sparkline re-renders whenever the bound data changes.
Adding a Multi Stats Card
Drop the block: Drag MultiStatsCard onto the canvas. The block shows a 2-column grid of placeholder stats by default.
Configure the stats array: In the Content inspector, open the Stats editor. Add one object per metric. Bind values to data source fields — for example:
[{ title: "Revenue", value: ds.totalRevenue }, { title: "Orders", value: ds.orderCount }, { title: "Avg. Order", value: ds.avgOrder, unit: "USD" }].Set layout and columns: Set Layout = grid and Columns = 3 to match the 3-metric array. Set Card Padding = md.
Enable sparklines (optional): Set Show Sparklines = true. Add
sparklineDataarrays to each stats object bound to the last 30 days of daily data for that metric. The sparklines appear at the bottom of each cell automatically.
Examples
Example: Sales overview panel
A 3-column grid card with: Revenue (value: $42,300, trend: up 8%), Orders (value: 1,204, trend: up 3%), and Avg. Order Value (value: $35.13, trend: down 4%, trendPositive down: false so red is bad). Enable sparklines with 30-day daily data. This single card replaces three separate Stat Cards while communicating the commercial summary of the day.
Example: Current vs target split layout
Use Layout = split with 2 stats: { title: "Current Quarter", value: "$1.2M" } and { title: "Q3 Target", value: "$1.5M" }. The vertical divider between them visually represents the gap. Add a Progress block below the Multi Stats Card bound to {{ (currentQ / targetQ * 100) }} to show progress toward the target.
Related Pages
| Page | Relationship |
| Stat Card | Single metric block — use when one metric needs to stand alone prominently |
| Line & Area Charts | Full-size trend charts to accompany Multi Stats Card sparklines with more detail |