Sparkline Metric Chart

The Sparkline Metric chart combines a prominent "big number" metric with a sparkline visualization, showing both the current value and its trend over time at a glance. It fills the gap between the Number Chart (single value with optional delta) and the Line Chart (full time series).

Data Requirements

The Sparkline Metric chart is available for query results with 1 to 4 columns, for any number of rows. It is automatically suggested when the result has 3 or more rows. The sparkline appears only when there are 2 or more rows. So does the delta, except when it compares with the previous period, which works from a single row. Otherwise a single row is a metric-only display.

The columns are interpreted as follows:

• 1 column (numeric): Values only. The sparkline x-axis uses the row index.
• 2 columns, timestamp + numeric: The first (temporal) column provides the sparkline x-axis timestamps and the second (numeric) column provides the values. The temporal column must come first.
• 2 columns, both numeric: The second column is used as the value and the x-axis falls back to the row index (no timestamps).
• 3 columns, timestamp + two numeric: A timestamp first, then the value and the previous period's value in either order. The previous column is recognized by its name — revenue_previous, prev_revenue, prior_orders, revenue_ly and last_period_revenue all work — and the chart opens as a comparison with the previous period. When neither name says which is which, the first numeric column is the value and there is no comparison.
• 4 columns: As with 3 columns, plus a second timestamp column anywhere after the first, holding the previous period's dates.

For example, a query like:

SELECT {created_at:day}, count(*)
FROM events
GROUP BY 1
ORDER BY 1

displays the last value as the big number, the sparkline showing all values as a line chart, and an optional delta showing the change between the last two values, or between the first and last value.

Interactive Features

Tooltip

Hovering over the metric shows a tooltip. When a delta is shown (Show Delta enabled, and 2+ rows or a comparison with the previous period), it lists:

• Value: The big number, listed first when it is a Sum or Average and the delta compares two points of the series
• Current value: The big number when comparing with the previous period, otherwise the last value of the series
• First value, Previous value or Previous period: Depending on the delta mode
• Change: The absolute delta with percentage

When a Sum or Average comparison with the previous period had to leave rows out, the tooltip also says how many points were compared, for example Compared over 14 of 31 points.

When no delta is shown, the tooltip lists just the Value. When copying is available (and no drill-down is configured), the tooltip also shows a Click to copy hint.

When Show Sparkline Tooltip is enabled, hovering over the sparkline shows the date/time and value at each data point. With a Previous Period Column, it also shows that point's previous value, its date when there is a Previous Period Timestamps Column, and the change between the two.

Click to Copy

When no drill-down is configured, clicking the metric copies the values its tooltip lists: the current value always, plus the big number when it is listed separately, the previous value (or previous period value) and the delta when a delta is shown.

Drill-Down

When a drill-down is configured, clicking the metric either:

• Navigates to the target dashboard with the configured filter values, or
• Applies the filters to the current dashboard when no target dashboard is set — acting as an interactive filter control.

The hover effect shows a subtle scale animation with a colored underline. A configured drill-down replaces the click-to-copy behavior.

Configuration

The chart is configured in the report editor. A toolbar above the chart preview provides quick controls:

• S, M, L, XL: Preset sizes for the metric value and related text (default L). Text scales down responsively in narrow tiles, clamped to the S size.
• Show Title: Toggle the title display (default on).
• Show Sparkline Tooltip: Toggle the sparkline hover tooltip (default on; hidden when the sparkline is shown behind the value).

The remaining options live in the Settings, Drill-Down, and Conditional Format tabs.

Title & Position

• Title: Custom title for the metric (defaults to the column name). Shown only when Show Title is on.
• Subtitle: Optional secondary text shown on the delta row. Available only when Title on opposite side is enabled.
• Icon: Optional icon displayed next to the title, chosen from over 5,500 icons. Search by name and pick an icon style — stroke, solid, duotone, twotone, or bulk (in rounded, standard, or sharp variants where available; default stroke rounded).
• Position: Where the metric sits relative to the sparkline. 8 positions are available (Top Left, Top Center, Top Right, Left, Right, Bottom Left, Bottom Center, Bottom Right), plus Center when the sparkline is behind the value (default Top Center). The Left and Right positions place the sparkline beside the metric; Top and Bottom positions stack them vertically.
• Title on opposite side: Places the title on the opposite side of the metric value on the same row, with an optional subtitle on the delta row. Available only for left- or right-aligned positions, not when centered.

The icon picker — search across 5,500+ built-in icons and choose a style.

Choosing an icon style — each option previews the selected icon in that style (stroke, solid, duotone, twotone, and bulk, in rounded, standard, and sharp variants where available).

Values

• Value Column: Which numeric column provides the metric value and sparkline data.

• Sparkline Timestamps Column: Which temporal column provides the x-axis timestamps. Select None (row index) to use the row index.

• Previous Period Column: A numeric column holding the previous period's value for each row (default None). Choosing one draws it behind the sparkline and switches the delta to vs Previous period. See Comparing with the previous period.

• Previous Period Timestamps Column: Optional, shown once a previous column is chosen. The date of each previous value, shown in the sparkline tooltip and used to name the previous period in the delta label. If the query has exactly one date column besides the sparkline's timestamps, it is selected for you. The sparkline's own timestamps are not offered here: they are the current period's dates.

• Big Number: What the big number shows:

  • Last: The last value of the series (default), for a level such as MRR or active users
  • Sum: The total over the series, for counts and amounts such as revenue or orders
  • Average: The mean of the series' values

  Sum and Average change the big number in every delta mode, but only vs Previous period compares them: Current vs First and Last vs Second-to-last still compare individual points of the series.

Values Formatting

Standard value formatting options: number, money, or bytes format, with abbreviation, precision, rounding, and currency settings.

Sparkline

• Sparkline Color: The color of the sparkline line and gradient fill. As with other charts, it can use a color from the dashboard color scheme or a custom hex color (default: the first color of the dashboard color scheme).
• Fill / Gradient: Controls the area fill under the sparkline line:
  • None: Line only, no fill
  • Light: Subtle gradient from 30% opacity to transparent (default)
  • Strong: Visible gradient from 60% opacity to transparent
  • Filled: Solid 40% opacity fill
• Show sparkline behind value: When enabled, the sparkline fills the entire background with the metric overlaid on top. The sparkline renders at reduced opacity with a text shadow for legibility.
• Show previous period: Draws the previous period as a dotted line behind the sparkline (default on). Shown only with a Previous Period Column. Turning it off hides the line; the delta and the tooltip still compare with the previous period.

Delta

• Show Delta: Toggle the delta indicator below the metric value (default on). Shown when there are 2+ rows, or from a single row when comparing with the previous period.
• Delta Mode: How to calculate the delta:
  • Current vs First: Compares the last value to the first value in the series (default)
  • Last vs Second-to-last: Compares the last value to the one before it
  • vs Previous period: Compares the big number with the same measure of the Previous Period Column. Available only with a previous column.
• Display: How to show the delta value:
  • Delta: Absolute value only (e.g., +465)
  • Percents: Percentage only (e.g., +37.3%)
  • Delta + %: Both (e.g., +465 (+37.3%)) (default)
• Label: Text shown after the delta, such as vs last week. When comparing with the previous period, the default names the period from the Previous Period Timestamps Column: vs previous 30 days, vs previous month, vs last year, vs 30 days before for a Last value, or a date range such as vs Sep 1 – Sep 14 when the gap between the dates is not the same throughout. Only the compared rows count, so a month to date reads vs previous month. Without previous dates it reads vs previous period. The point-based modes have no label unless you set one.
• Down is good: Inverts the delta colors (green for a decrease, red for an increase).

A positive delta shows green with an up caret, a negative delta shows red with a down caret, and a zero change shows neutral gray with a right caret (regardless of Down is good). When the baseline value is zero, the percentage is omitted (division by zero) and only the absolute delta is shown. When the previous period has no value to compare with, the delta reads no previous value in gray.

Drill-Down

Configure a drill-down action with semantic value options:

• Last value: The current metric value (always available)
• First value: The first value in the series (requires 2+ rows)
• Previous value: The second-to-last value (requires 2+ rows)
• Previous period value: The previous period's value the delta compares with (requires a Previous Period Column)
• Delta: The computed difference (requires 2+ rows, or the vs Previous period delta mode)
• Timerange: The time range spanned by the data (requires a timestamp column). Formatted as unix~unix for the standard timerange filter, or as ISO timestamps (ISO~ISO) for custom date-range filters.

Conditional Formatting

Apply formatting rules based on conditions:

• When: Value, Delta, or Delta Percent
• Apply to: Value, Delta, or Sparkline Color — selecting Sparkline Color shows a color picker that recolors the sparkline when the rule matches.
• For Value and Delta, supports all standard style types: preset colors, custom styles, CSS, text prefix/suffix/replace, and icons. Thresholds use plain numeric values.

Comparing with the previous period

A delta against the first point of the series answers "how did this range trend", not "how does this compare with last month". To compare with the previous period, return the previous period's values from the query, one per row, beside the current ones. The chart draws them as a dotted line behind the sparkline, and the delta compares the big number with the same measure of the previous period.

The query decides what "previous" means — the previous 30 days, the same days last year, the previous month — and pairs each row with its previous-period partner. For example, each day of October 2016 against the day 30 days before, with that day's date:

WITH days AS (
  SELECT trunc(saletime) AS day, sum(pricepaid)::bigint AS revenue
  FROM sales
  GROUP BY 1
)
SELECT c.day,
       c.revenue,
       p.day AS prev_day,           -- the previous period's dates, shown in the tooltip
       p.revenue AS revenue_previous -- recognized by name as the previous period
FROM days c
LEFT JOIN days p ON p.day = dateadd(day, -30, c.day)
WHERE c.day BETWEEN '2016-10-02' AND '2016-10-31'
ORDER BY c.day

With Big Number set to Sum, the tile shows the revenue for October 2–31 and its change against the 30 days before, labelled vs previous 30 days from the prev_day dates. With Last, it compares the last day with its own previous value, and the label reads vs 30 days before.

Rows without a current value are left out of both sides of the comparison. A period still in progress — a month to date, say — can return every day of the month with the later days empty, and its total is then compared with the same days of the previous period, not with the whole of it. The dotted line still shows the whole previous period, so you can see what is left to come.

Examples

A daily revenue metric with its recent trend:

SELECT
  date_trunc('day', created_at) AS day,
  sum(amount) AS revenue
FROM orders
WHERE {timerange:created_at}
GROUP BY 1
ORDER BY 1

This returns one row per day — a timestamp column followed by a numeric value. The chart shows the most recent day's revenue as the big number, a sparkline of the daily trend, and a delta comparing the latest value to the baseline. Useful configuration for this case:

• Delta Mode: Last vs Second-to-last for day-over-day change, or Current vs First for the trend across the whole range. To compare with the same days of an earlier period, see Comparing with the previous period.
• Show sparkline behind value with the Center position for a compact KPI tile.
• A Conditional Formatting rule on Delta applied to Sparkline Color to turn the sparkline red when revenue drops.

Best Practices

Query Design:

• Order chronologically: ORDER BY the timestamp ascending so the last row is the current value and the delta compares the correct endpoints.
• One row per period: Aggregate to a single row per time bucket (day, week, month) so the sparkline reflects an even series.
• Return 3+ rows: A meaningful trend needs several points; the chart is auto-suggested at 3 or more rows.

Configuration:

• Match the delta mode to the question: Use vs Previous period to compare with an earlier period, Last vs Second-to-last for the change since the previous point, and Current vs First for the trend across the range.
• Use "Show sparkline behind value" for compact KPI tiles where the trend is context rather than the focus.
• Enable "Down is good" for metrics where a decrease is positive (e.g., churn, cost, latency).

Performance:

• Pre-aggregate long histories in SQL rather than returning thousands of rows; the sparkline only needs enough points to show the shape.
• Bound the query with a {timerange} filter so the series stays proportional to the dashboard's selected period.