Cartesian

LineChart

Multi-series SVG line chart for time, numeric, or categorical x-values with smooth, linear, step, point, label, and area-fill variants.

Examples

Multiple series

Line Chart - Multiple Smooth multi-series trend lines. Desktop Mobile

Line Chart - Multiple
date	Desktop	Mobile
Apr 1	222	150
Apr 8	248	178
Apr 15	301	212
Apr 22	277	236
Apr 29	336	264
May 6	365	311

<LineChart
  title="Line Chart - Multiple"
  xKey="date"
  data={traffic}
  showPoints
  series={[
    {key: 'desktop', label: 'Desktop'},
    {key: 'mobile', label: 'Mobile'}
  ]}
/>

Step

Line Chart - Step Discrete changes without interpolation. Mobile

Line Chart - Step
month	Mobile
Jan	80
Feb	200
Mar	120
Apr	190
May	130
Jun	140

<LineChart
  title="Line Chart - Step"
  xKey="month"
  data={areaMix}
  curve="step"
  series={[{key: 'mobile', label: 'Mobile', showPoints: true}]}
/>

Labels

Line Chart - Labels Point labels for small categorical series. Desktop

Line Chart - Labels
month	Desktop
Jan	186
Feb	305
Mar	237
Apr	273
May	209
Jun	214

<LineChart
  title="Line Chart - Labels"
  xKey="month"
  data={areaMix}
  showLabels
  showPoints
  series={[{key: 'desktop', label: 'Desktop'}]}
/>

Props

Prop	Type	Default	Description
`data`	`ChartDatum[]`	`—`	Rows to plot. Each row must include the xKey and every series key.
`series`	`ChartSeries[]`	`—`	Line series config with key, label, color, icon, unit, and showPoints.
`xKey`	`string`	`'x'`	Field used for the x-axis value.
`xType`	`'point' \| 'linear' \| 'time'`	`—`	Override inferred x-axis scale kind.
`curve`	`'linear' \| 'monotone' \| 'step'`	`'monotone'`	D3 curve interpolation for the line.
`showArea`	`boolean`	`false`	Render a translucent area under each line.
`showPoints`	`boolean`	`false`	Render point markers for every datum.
`showLabels`	`boolean`	`false`	Render value labels above points.

Install

CLI

npm install d3-array d3-scale d3-shape
npx @a3tai/mittsu add line-chart --registry ./packages/charts/registry.json