# ChoroplethMap

> Regions colored by value: customers by department, sales by country.

Source: https://ui.jcsoftdev.com/docs/components/choropleth-map

Regions colored by value: customers by department, sales by country.
Sequential, diverging or threshold scales come from tokens, so the map
follows the theme and accent. Hover or arrow keys highlight a region and
show its value; click or Enter calls `onRegionClick`; zoom with the
buttons, wheel, pinch or `+` / `-`, drag to pan, `0` to fit.

## Import

```ts
import { ChoroplethMap } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/choropleth-map`.

## Usage

```tsx
<ChoroplethMap
  title="Clientes por departamento"
  map={peruMap}
  data={customers}
  valueName="Clientes"
  valueFormat="integer"
  scale="sequential"
  regionLabels="none"
  dataTable="hidden"
  legend
  tooltip
  zoomable
  wheelZoom="always"
  maxZoom={16}
  animate
  loading={false}
  labels={spanishLabels}
  height={520}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `map` * | `GeoMap` |  | Geometry to draw, e.g. `peruMap` from `@jcsoftdev/ui/charts/maps/data/peru`. |
| `data` * | `readonly ChoroplethDatum[]` |  |  |
| `scale` | `"sequential" \| "diverging"` | `"sequential"` | "sequential" (empty to brand) or "diverging" (low hue, neutral at `center`, brand). |
| `domain` | `readonly [number, number]` |  | Fixed [min, max] of the color scale; the data extent by default. |
| `center` | `number` | `0` | Neutral value of a diverging scale. |
| `colors` | `ScaleColors` |  |  |
| `ranges` | `readonly ColorRange[]` |  | Stepped (threshold) coloring; replaces the continuous scale. |
| `valueFormat` | `ValueFormat` |  |  |
| `valueName` | `string` |  | Name of the value in the tooltip and the data table, e.g. "Clientes". |
| `projection` | `"equirectangular" \| "mercator" \| "equalEarth" \| "fitted"` |  | Overrides the projection of the map. |
| `regionLabels` | `"name" \| "value" \| "none"` | `"none"` | Text drawn on each region where it fits: its name or its value. |
| `height` | `number \| "fill"` |  | Height in px, "fill" or the default (half of the width, at least 220). |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width. |
| `legend` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `dataTable` | `"hidden" \| "toggle" \| "visible"` | `"hidden"` | The numbers as a real table, the accessible alternative to color: "hidden" (default, for screen readers only), "visible" (replaces the map) or "toggle" (a button switches between the map and the table). |
| `zoomable` | `boolean` | `true` | Zoom buttons, wheel, drag and pinch. |
| `wheelZoom` | `"always" \| "modifier"` | `"modifier"` | "modifier": the wheel only zooms with Ctrl or Cmd held, so page scrolling is never trapped. |
| `maxZoom` | `number` | `16` |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<MapLabels>` |  |  |
| `onRegionClick` | `((region: ChoroplethRegionInfo) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-choroplethmap--default)
- [Region Labels](/storybook/?path=/story/charts-choroplethmap--region-labels)
- [Diverging](/storybook/?path=/story/charts-choroplethmap--diverging)
- [Thresholds](/storybook/?path=/story/charts-choroplethmap--thresholds)
- [Missing Data](/storybook/?path=/story/charts-choroplethmap--missing-data)
- [World](/storybook/?path=/story/charts-choroplethmap--world)
- [World Mercator](/storybook/?path=/story/charts-choroplethmap--world-mercator)
- [Drilldown](/storybook/?path=/story/charts-choroplethmap--drilldown)
- [Data Table](/storybook/?path=/story/charts-choroplethmap--data-table)
- [Data Table Toggle](/storybook/?path=/story/charts-choroplethmap--data-table-toggle)
- [Data Table Narrow](/storybook/?path=/story/charts-choroplethmap--data-table-narrow)
- [Loading](/storybook/?path=/story/charts-choroplethmap--loading)
- [Empty](/storybook/?path=/story/charts-choroplethmap--empty)
- [Narrow](/storybook/?path=/story/charts-choroplethmap--narrow)
- [Fill Parent](/storybook/?path=/story/charts-choroplethmap--fill-parent)

## Source

`packages/ui/src/charts/choropleth-map/choropleth-map.tsx`