Live Line Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { LiveLineChart, LiveLine, LiveXAxis, LiveYAxis, ChartTooltip } from "@bklitui/ui/charts"
4import { LiveLineChart, LiveLine, LiveXAxis, LiveYAxis, ChartTooltip } from "@/components/charts"
5 
6import { curveNatural } from "@visx/curve";
7 
8const initialData = Array.from({ length: 24 }, (_, i) => ({
9  time: Date.now() - (23 - i) * 60_000,
10  value: 50 + Math.sin(i / 3) * 20,
11}));
12 
13export default function Component() {
14  return (
15    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
16      <div className="w-full max-w-3xl">
17        <LiveLineChart
18  data={initialData}
19  interval={1000}
20  maxPoints={24}
21  xDataKey="time"
22  yDataKey="value"
23>
24  <LiveLine curve={curveNatural} stroke="var(--chart-line-primary)" />
25  <LiveXAxis />
26  <LiveYAxis />
27  <ChartTooltip />
28</LiveLineChart>
29      </div>
30    </main>
31  )
32}