ztd chartsHome

Trend · Basic

Line chart

Change over time.

Open in playground
Use when
A metric over time, such as monthly users, alone or against other series
Avoid when
x is a category with no order

Try it

13

Line chart

Monthly active users (10k)
Line chartLine chart. 3 series (Our app, Rival A, Rival B), x from Jan to Dec, 12 points.Our appRival ARival B
Line chart data
JanOur app 42, Rival A 56.8, Rival B 38
FebOur app 46.8, Rival A 57.3, Rival B 38.8
MarOur app 50.3, Rival A 57.1, Rival B 37.6
AprOur app 52.2, Rival A 56.8, Rival B 35.2
MayOur app 53.4, Rival A 56.9, Rival B 34.3
JunOur app 55.3, Rival A 57.8, Rival B 35.3
JulOur app 58.9, Rival A 59.5, Rival B 35.9
AugOur app 63.7, Rival A 61.6, Rival B 34.3
SepOur app 68.5, Rival A 63.6, Rival B 32
OctOur app 72, Rival A 64.9, Rival B 31.5
NovOur app 73.9, Rival A 65.4, Rival B 32.6
DecOur app 75.1, Rival A 65.2, Rival B 32.9
Only our app keeps climbingBasic

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 line --variant <id>) and the MCP server know the same names.

Step

Monthly active users (10k)
Sample data

Every series in color

Monthly active users (10k)
Sample data

Target band and forecast

Monthly active users (10k)
Sample data

Drag to zoom

Monthly active users (10k)
Sample data

Range band

Monthly active users (10k)
Sample data

Forecast range

Monthly active users (10k)
Sample data

Code

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

const data = [
  {"month":"2025-01","app":"Our app","mau":42,"p5":39.4,"p95":44.6},
  {"month":"2025-01","app":"Rival A","mau":56.8},
  {"month":"2025-01","app":"Rival B","mau":38},
  {"month":"2025-02","app":"Our app","mau":46.8,"p5":42.3,"p95":47.9},
  {"month":"2025-02","app":"Rival A","mau":57.3},
  {"month":"2025-02","app":"Rival B","mau":38.8},
  // … 30 more rows
];

export function Example() {
  return (
    <ChartCard number="13" title="Line chart" subtitle="Monthly active users (10k)" takeaway="Only our app keeps climbing" level="basic" replay>
      <LineChart
        data={data}
        x="month"
        y="mau"
        series="app"
        area={true}
      />
    </ChartCard>
  );
}

Props

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

50 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
xRequiredx field (date, number or category)string | (d, i) => any
yRequiredy field. An array for wide tablesstring | (d, i) => number | string[]
seriesSeries field (long tables)string | (d, i) => string
lowerLower bound of the range band. In wide tables an array in the order of ystring | (d, i) => number | string[]
upperUpper bound of the range band. Same shape as lowerstring | (d, i) => number | string[]
curveLine shape"smooth" | "linear" | "step"Default "smooth"
xTypeSets the x type yourself. Automatic when omitted: ISO dates, dotted dates such as "2025.03.01", Korean year-month-day dates, quarters such as "2024Q1" and English month names are read as dates. With "date", 10-digit numbers are Unix seconds"number" | "date" | "band"
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
aggregateHow rows with the same x (and series) combine: "sum" adds them, "mean" averages, "last" keeps the last row, "count" counts rows"sum" | "mean" | "last" | "count"Default "sum"
dotsShow dots. "auto" | true | falseanyDefault "auto"
areaGradient under the highlighted seriesbooleanDefault false
zeroInclude 0 on the y axisbooleanDefault false
endLabelsSeries name tags at the right endboolean
colorModeColor only the highlight, or every series"highlight" | "categorical"Default "highlight"
yDomainFixed y rangenumber[]
yScaley axis scale. "log" spaces 1, 10, 100 and 1,000 evenly, so values spread over 1,000 times or more stay readable. Values at or below 0 are left out"linear" | "log"Default "linear"
maxPointsAbove this many points, LTTB downsamples the linenumber
referenceLinesHorizontal reference lines [{ y, label }]any[]
yLabely axis titlestring
brushDrag to select a range. true shows the change and the high and low, "zoom" zooms into the range (keyboard: Shift+arrows, Enter)anyDefault false
annotationsNotes drawn on the chart: target band, period, reference line, event, forecast, trend line, weekend shading. [{ type, x, y, from, label }]annotations
signColorsColors the highlighted series differently above and below baseline (profit and loss)booleanDefault false
baselineValue that splits signColorsnumberDefault 0
downColorColor below the baseline (token name or CSS color)stringDefault "neutralStrong"
bandFromWhere the range band starts. "forecast" starts it at the forecast annotation"start" | "forecast"Default "start"
outsideMark points outside the range band and count them in the descriptionbooleanDefault false
connectNullsJoin the line across missing values (null, NaN or no row at that x). By default the line and its area break there, and a point left alone shows as a dot. Stacked areas ignore itbooleanDefault false
hiddenSeries to hide. Colors stay as if every series were shown. With card.legend "toggle", viewers can show them againstring[]
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