Line
Connected series with optional points and a themed stroke.
Use TanStack's lineY mark. Map the category to x and the metric to y,
and stroke with a resolved token.
'use client'
import { Chart, useChart } from '@saas-ui/charts'
import { lineY } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'
import { useMemo } from 'react'
const data = [
{ date: 'Jan', active: 1240 },
{ date: 'Feb', active: 1580 },
{ date: 'Mar', active: 1490 },
{ date: 'Apr', active: 1820 },
{ date: 'May', active: 1760 },
{ date: 'Jun', active: 2110 },
]
export const ChartLine = () => {
const chart = useChart({
data,
series: [{ name: 'active', label: 'Active users', color: 'indigo.solid' }],
})
const definition = useMemo(
() =>
chart.define({
marks: [
lineY(chart.data, {
x: 'date',
y: 'active',
stroke: chart.color('indigo.solid'),
strokeWidth: 2,
points: true,
}),
],
x: {
scale: () => scaleBand<string>().padding(0.12),
grid: false,
axis: { line: false, ticks: { size: 0 } },
},
y: {
scale: scaleLinear,
nice: true,
grid: true,
axis: { line: false, ticks: { size: 0 } },
},
}),
[chart],
)
return (
<Chart.Root
chart={chart}
definition={definition}
height={240}
ariaLabel="Active users"
/>
)
}
Usage
import { Chart, useChart } from '@saas-ui/charts'
import { lineY } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'const definition = chart.define({
marks: [
lineY(chart.data, {
x: 'date',
y: 'active',
stroke: chart.color('indigo.solid'),
strokeWidth: 2,
points: true,
}),
],
x: { scale: () => scaleBand<string>().padding(0.12) },
y: { scale: scaleLinear, nice: true, grid: true },
})points: true draws a dot at each observation. For time series, swap the x
scale for scaleUtc from d3-scale and pass Date values.
Multiple series
Add one lineY mark per series, or partition a long table with z. Declare
matching series entries so the tooltip and legend can name each line.
Desktop
Mobile
'use client'
import { Chart, useChart } from '@saas-ui/charts'
import { lineY } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'
import { useMemo } from 'react'
const data = [
{ date: 'Jan', desktop: 820, mobile: 420 },
{ date: 'Feb', desktop: 910, mobile: 670 },
{ date: 'Mar', desktop: 880, mobile: 610 },
{ date: 'Apr', desktop: 1040, mobile: 780 },
{ date: 'May', desktop: 980, mobile: 780 },
{ date: 'Jun', desktop: 1120, mobile: 990 },
]
export const ChartLineMultiple = () => {
const chart = useChart({
data,
series: [
{ name: 'desktop', label: 'Desktop', color: 'indigo.solid' },
{ name: 'mobile', label: 'Mobile', color: 'pink.solid' },
],
})
const definition = useMemo(
() =>
chart.define({
marks: [
lineY(chart.data, {
x: 'date',
y: 'desktop',
stroke: chart.color('indigo.solid'),
strokeWidth: 2,
points: true,
}),
lineY(chart.data, {
x: 'date',
y: 'mobile',
stroke: chart.color('pink.solid'),
strokeWidth: 2,
points: true,
}),
],
x: {
scale: () => scaleBand<string>().padding(0.12),
grid: false,
axis: { line: false, ticks: { size: 0 } },
},
y: {
scale: scaleLinear,
nice: true,
grid: true,
axis: { line: false, ticks: { size: 0 } },
},
}),
[chart],
)
return (
<Chart.Root
chart={chart}
definition={definition}
height={240}
ariaLabel="Sessions by device"
>
<Chart.Legend />
</Chart.Root>
)
}
const chart = useChart({
data,
series: [
{ name: 'desktop', label: 'Desktop', color: 'indigo.solid' },
{ name: 'mobile', label: 'Mobile', color: 'pink.solid' },
],
})