Line Chart

Trends over an ordered axis: 2px lines, end dots, crosshair tooltip with every series.

Import

import { LineChart } from '@marbleui/ui'

Props

<LineChart>

Prop	Type	Default	Description
data *required	`Datum[]`	`—`
index *required	`string`	`—`	Key in each datum used for the x axis.
series *required	`Series[]`	`—`
summary *required	`string`	`—`	Accessible one-sentence summary of the chart.
className	`string`	`—`
curve	`'smooth' \| 'linear'`	`—`
description	`ReactNode`	`—`
endLabels	`boolean`	`—`	Label the last point of each line (direct labels, ≤4 series).
height	`number`	`—`
indexFormat	`(v: unknown) => string`	`—`
showGrid	`boolean`	`—`
showLegend	`boolean`	`—`
showYAxis	`boolean`	`—`
title	`ReactNode`	`—`
valueFormat	`(n: number) => string`	`—`

Usage notes

Trends across an ordered axis such as months or releases: one 2px line per series with a dot on the latest point. Use AreaChart when a stacked total matters, Sparkline for a trend inside a table cell. The frame and table come from ChartContainer.

<LineChart
  title="Visits by channel"
  summary="Organic visits led every month and roughly doubled over the year."
  data={visits} index="month"
  series={[{ key: 'organic', label: 'Organic' }, { key: 'paid', label: 'Paid' }, { key: 'referral', label: 'Referral' }]}
  endLabels showLegend={false}
/>

endLabels names each line at its last point. Labels aren’t moved apart, so use it for up to four lines that end at different heights, and drop the legend with showLegend={false}.
Tab focuses the plot and shows the last point; Left/Right step through points, Escape clears. The plot is named by summary, and a live region reads each point as you step.
The y-axis always includes zero and missing values plot as 0, which flattens narrow ranges (prices, temperatures) and hides gaps.
The x-axis is categorical: points are evenly spaced in data order, so sort rows and keep index values unique. curve="linear" replaces the default smooth.

Example source · show

import { traffic } from '../lib/chart-samples'
import { LineChart } from './line-chart'

const series = [
  { key: 'organic', label: 'Organic' },
  { key: 'paid', label: 'Paid' },
  { key: 'referral', label: 'Referral' },
]

export const styles = {
  'End labels': () => <LineChart className="w-[36rem]" title="Visits by channel" summary="Visits by channel per month; organic leads all year." data={traffic} index="month" series={series} endLabels showLegend />,
  Single: () => <LineChart className="w-[36rem]" title="Paid visits" summary="Paid visits per month." data={traffic} index="month" series={series.slice(1, 2)} curve="linear" />,
}

Source: packages/ui/src/line-chart/line-chart.tsx

Catalog