Choropleth Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip } from "@bklitui/ui/charts"
4import { ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip } from "@/components/charts"
5 
6const features = [
7  { id: "US", name: "United States", value: 120 },
8  { id: "CA", name: "Canada", value: 45 },
9  { id: "GB", name: "United Kingdom", value: 62 },
10];
11 
12export default function Component() {
13  return (
14    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
15      <div className="w-full max-w-3xl">
16        <ChoroplethChart data={features} aspectRatio="2 / 1">
17  <ChoroplethFeatureComponent />
18  <ChoroplethTooltip />
19</ChoroplethChart>
20      </div>
21    </main>
22  )
23}