ztd chartsHome

Trend · Basic

Sparkline

A small trend line next to a table cell or KPI.

Open in playground
Use when
The trend matters more than exact values
Avoid when
You need to read axis values

Try it

20

Sparkline

Daily revenue in June (10k KRW)
SparklineSparkline. 30 points, low 1,188, high 1,939, last 1,610.1,610
Sparkline data
6/11,200
6/21,304
6/31,356
6/41,335
6/51,265
6/61,359
6/71,188
6/81,250
6/91,358
6/101,457
6/111,499
6/121,468
6/131,555
6/141,335
6/151,334
6/161,406
6/171,516
6/181,609
6/191,640
6/201,760
6/211,525
6/221,471
6/231,482
6/241,562
6/251,673
6/261,760
6/271,939
6/281,732
6/291,656
6/301,610
Spikes every weekendBasic

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example sparkline --variant <id>) and the MCP server know the same names.

Bars

Daily revenue in June (10k KRW)
Sample data

Line only

Daily revenue in June (10k KRW)
Sample data

Mark the high

Daily revenue in June (10k KRW)
Sample data

Code

Sparkline.tsx
import { ChartCard, Sparkline } from "ztd-charts";

const data = [
  {"day":"2025-06-01","revenue":1200},
  {"day":"2025-06-02","revenue":1304},
  {"day":"2025-06-03","revenue":1356},
  {"day":"2025-06-04","revenue":1335},
  {"day":"2025-06-05","revenue":1265},
  {"day":"2025-06-06","revenue":1359},
  // … 24 more rows
];

export function Example() {
  return (
    <ChartCard number="20" title="Sparkline" subtitle="Daily revenue in June (10k KRW)" takeaway="Spikes every weekend" level="basic" replay>
      <Sparkline
        data={data}
        x="day"
        y="revenue"
        height={120}
        showExtremes={true}
      />
    </ChartCard>
  );
}

Props

<Sparkline> takes these props. Rows marked Common work the same on every chart.

29 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
xx fieldstring | (d, i) => any
yRequiredy fieldstring | (d, i) => number
variantShape"line" | "area" | "bar"Default "area"
showValueShow the last value as textbooleanDefault true
showExtremesMark the high and low pointsbooleanDefault false
markPoint that gets the highlight dot"last" | "max" | "min" | "none"Default "last"
dayFirstReads dates such as "05/03/2024", where either part could be the month, day first (5 March). Without it, a clear date in the column decides (25/03/2024), otherwise month first. true also reads "05.03.24" as day.month.yearboolean
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber
widthCommonFixed width in px. Without it, the chart fits its parentnumber
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" …
formatCommonValue format. "number" | "integer" | "percent" (values are already percents: 42 → "42%") | "ratio" (0.42 → "42%") | "compact" | "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) | "decimal" or Intl.NumberFormat options"number" | "percent" | "compact" | …
unitCommonUnit appended to values. For example "%" or "ms"string
localeCommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault "en-US"
animateCommonEntry and update animationbooleanDefault true
durationCommonAnimation length (ms)number
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring"
staggerCommonDelay between items as they enter (ms)number
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto"
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true
tooltipCommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault true
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring
ariaLabelCommonName for screen readersstring
descriptionCommonDescription for screen readers. Built from the data when omittedstring
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void
replayKeyCommonReplays the entry animation when it changesstring | number
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme>

Also in Trend