Sparkline

1<Sparkline
2  data={sampleData}
3  width={100}
4  height={40}
5  showArea={true}
6/>
7<Sparkline
8  data={revenueData}
9  width={100}
10  height={40}
11  showArea={true}
12  color="oklch(70% 0.15 160)"
13/>

1<Sparkline
2  data={sampleData}
3  width={120}
4  height={40}
5  showDots={true}
6/>
7<Sparkline
8  data={revenueData}
9  width={120}
10  height={40}
11  showDots={true}
12  showArea={true}
13/>

1<SparklineCard
2  title="Revenue"
3  value="$12,345"
4  change={{ value: 12.5, label: "vs last month" }}
5  data={revenueData}
6  sparklineColor="oklch(70% 0.15 160)"
7/>
8<SparklineCard
9  title="Active Users"
10  value="2,847"
11  change={{ value: -5.2, label: "vs last week" }}
12  data={usersData}
13  sparklineColor="oklch(70% 0.15 295)"
14/>

1<SparklineGroup
2  items={[
3    {
4      label: "Page Views",
5      value: 12345,
6      data: [100, 120, 115, 140, 130, 150, 145, 160],
7      color: "oklch(70% 0.15 220)",
8    },
9    {
10      label: "Sessions",
11      value: 8234,
12      data: [80, 85, 90, 95, 88, 100, 105, 110],
13      color: "oklch(70% 0.15 160)",
14    },
15  ]}
16/>

1<Sparkline
2  data={sampleData}
3  width={100}
4  height={40}
5  showArea={true}
6  color="oklch(60% 0.20 25)"
7  fillColor="oklch(60% 0.20 25)"
8/>