Change one and the preview follows.
dataReading[]Requiredstartnumber0format(n: number) => string(n) => n.toLocaleString('en-US')labelstring'Metric'look'ink' | 'plain''ink'onStart(i: number) => voidThrough a ref: start(), read()
usage.tsx
<BaselineChartdata={data}/>
A whole page, ready to paste.
page.tsx
"use client"
import { BaselineChart } from "@/components/detent/components/baseline/BaselineChart"
import type { Reading } from "@/components/detent/components/baseline/BaselineChart"
const data: Reading[] = [
{ label: "May", value: 12_400 },
{ label: "Jun", value: 13_900 },
{ label: "Jul", value: 13_200 },
{ label: "Aug", value: 15_800 },
{ label: "Sep", value: 17_100 },
{ label: "Oct", value: 19_600 },
]
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[640px]">
<BaselineChart
data={data}
label="Monthly revenue"
format={(n) => `$${n.toLocaleString("en-US")}`}
onStart={(i) => console.log(i)}
/>
</div>
</main>
)
}