Charts
Theme-aware charts for SaaS dashboards, built on TanStack Charts.
@saas-ui/charts is a Chakra token layer for
TanStack Charts. It resolves colors, spacing and
typography from your theme, then you compose chart geometry with TanStack
marks.
The package ships the pieces you reuse on every chart, not a catalog of one-off chart components:
useChart— data, series, token helpers anddefine()Chart— themed root, tooltip, legend and center overlayBarListandBarSegment— HTML compositions for ranked and part-to-whole data
Installation
npm i @saas-ui/charts @tanstack/chartsyarn add @saas-ui/charts @tanstack/chartspnpm add @saas-ui/charts @tanstack/chartsbun add @saas-ui/charts @tanstack/charts@saas-ui/charts and @tanstack/charts are peer dependencies. Charts also
expect a Chakra / Saas UI provider so token lookups resolve.
Usage
Create a chart instance with useChart, build a TanStack definition with
chart.define(), and render it through Chart.Root.
import { Chart, useChart } from '@saas-ui/charts'
import { barY } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'
const chart = useChart({
data,
series: [{ name: 'revenue', label: 'Revenue', color: 'indigo.solid' }],
})
const definition = chart.define({
marks: [
barY(chart.data, {
x: 'date',
y: 'revenue',
fill: chart.color('indigo.solid'),
}),
],
x: { scale: () => scaleBand<string>().padding(0.28) },
y: { scale: scaleLinear, nice: true, grid: true },
})
return (
<Chart.Root
chart={chart}
definition={definition}
height={240}
ariaLabel="Monthly revenue"
/>
)'use client'
import { Chart, useChart } from '@saas-ui/charts'
import { barY } 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', revenue: 12500 },
{ date: 'Feb', revenue: 15800 },
{ date: 'Mar', revenue: 14200 },
{ date: 'Apr', revenue: 16900 },
{ date: 'May', revenue: 13600 },
{ date: 'Jun', revenue: 19200 },
]
const compactCurrency = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
notation: 'compact',
maximumFractionDigits: 1,
})
export const ChartBar = () => {
const chart = useChart({
data,
series: [{ name: 'revenue', label: 'Revenue', color: 'indigo.solid' }],
})
const definition = useMemo(
() =>
chart.define({
marks: [
barY(chart.data, {
x: 'date',
y: 'revenue',
fill: chart.color('indigo.solid'),
maxThickness: 20,
radius: 2,
}),
],
x: {
scale: () => scaleBand<string>().padding(0.28),
grid: false,
axis: { line: false, ticks: { size: 0 } },
},
y: {
scale: scaleLinear,
nice: true,
grid: true,
axis: {
line: false,
ticks: {
size: 0,
format: (value: number) => compactCurrency.format(value),
},
},
},
}),
[chart],
)
return (
<Chart.Root
chart={chart}
definition={definition}
height={240}
ariaLabel="Monthly revenue"
/>
)
}
chart.color(), chart.size() and chart.spacing() resolve Saas UI tokens
to CSS values TanStack can paint. Pass token paths such as indigo.solid or
fg.muted.
Mental model
TanStack Charts is a grammar of graphics: you pick marks (barY, lineY,
areaY, polar arcs) and map your fields onto channels. @saas-ui/charts
does not wrap those marks. It gives you a theme-aware define() so the
same chart follows light and dark mode, and Chakra components for tooltip,
legend and HTML chart layouts.
See the TanStack Charts docs for the full mark and scale catalog.
What's included
| Export | Use it for |
|---|---|
| useChart | Data, series, formatting, token helpers, define() |
| Chart | SVG charts: root, tooltip, legend, center |
| Bar, Line, Area, Pie | Common mark compositions |
| Bar List | Ranked HTML bars |
| Bar Segment | Part-to-whole HTML bars |