# Visitors Map

> bklit's choropleth chart shading a world map by visitors per country, with a hover tooltip, a colour key, a top-countries list underneath, and proper loading and retry states while the map loads.

- Page: https://devl.dev/components/bklit-choropleth-chart
- Kind: component · Charts
- Install: `npx shadcn@latest add https://ui.bklit.com/r/choropleth-chart.json`
- npm: geojson, lucide-react, topojson-client
- coss ui: button
- By bklit (MIT): https://ui.bklit.com

## Usage

```tsx
import { VisitorsMapCard } from "@/components/bklit-choropleth-chart";

const visitors: Record<string, number> = {
  "United States of America": 48210,
  Germany: 17420,
  "United Kingdom": 15980,
  India: 13110,
  Canada: 9240,
  France: 8710,
  Brazil: 7380,
  Japan: 6920,
  Netherlands: 5140,
  Australia: 4870,
  Spain: 3960,
  Sweden: 3420,
  Poland: 3110,
  Mexico: 2890,
  "South Korea": 2640,
  Italy: 2510,
  Indonesia: 1980,
  Nigeria: 1460,
  Argentina: 1320,
  "South Africa": 1170,
  Norway: 1090,
  Turkey: 980,
  Vietnam: 870,
  Kenya: 640,
  Switzerland: 1240,
  Ireland: 980,
  Denmark: 810,
  Belgium: 760,
  Philippines: 760,
  Finland: 720,
  Austria: 690,
  Ukraine: 650,
  Portugal: 620,
  "New Zealand": 610,
  Israel: 580,
  Czechia: 560,
  Pakistan: 540,
  Colombia: 520,
  Romania: 480,
  Chile: 470,
  Egypt: 410,
  China: 380,
};

export default function BklitChoroplethChartDemo() {
  return <VisitorsMapCard visitors={visitors} />;
}
```