Scatter Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { ScatterChart, Scatter, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts"
4import { ScatterChart, Scatter, Grid, XAxis, ChartTooltip } from "@/components/charts"
5 
6const chartData = [
7  { date: new Date("2024-01-01"), sessions: 420, conversions: 28 },
8  { date: new Date("2024-02-01"), sessions: 510, conversions: 34 },
9  { date: new Date("2024-03-01"), sessions: 390, conversions: 22 },
10  { date: new Date("2024-04-01"), sessions: 580, conversions: 41 },
11  { date: new Date("2024-05-01"), sessions: 620, conversions: 38 },
12  { date: new Date("2024-06-01"), sessions: 710, conversions: 52 },
13];
14 
15export default function Component() {
16  return (
17    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
18      <div className="w-full max-w-3xl">
19        <ScatterChart data={chartData}>
20  <Grid horizontal />
21  <Scatter dataKey="sessions" />
22  <Scatter dataKey="conversions" />
23  <XAxis />
24  <ChartTooltip />
25</ScatterChart>
26      </div>
27    </main>
28  )
29}