Gauge Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { Gauge } from "@bklitui/ui/charts"
4import { Gauge } from "@/components/charts"
5 
6 
7 
8export default function Component() {
9  return (
10    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
11      <div className="w-full max-w-3xl">
12        <Gauge
13  value={72}
14  centerValue={72}
15  totalNotches={40}
16  defaultLabel="Score"
17  formatOptions={{ style: "percent" }}
18/>
19      </div>
20    </main>
21  )
22}