# MapLegend

> Color key of a choropleth: a gradient bar with its extremes (and centre when diverging), or one swatch per range.

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

Color key of a choropleth: a gradient bar with its extremes (and centre when
diverging), or one swatch per range. It sits under the map in narrow
containers and above it, aligned to the end, from `@md/chart`.

## Import

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

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

## Usage

```tsx
<MapLegend
  kind="sequential"
  domain={[0, 24000]}
  format={soles}
  noData="Sin sedes"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `kind` * | `"sequential" \| "diverging"` |  |  |
| `domain` * | `readonly [number, number]` |  |  |
| `center` | `number` | `0` |  |
| `colors` | `ScaleColors` |  |  |
| `ranges` | `readonly ColorRange[]` |  | Stepped scale: one swatch per range instead of a gradient bar. |
| `format` * | `ValueFormatter` |  |  |
| `noData` | `string` |  | Swatch for regions without data, with its label. |

`*` marks a required prop.

## Storybook stories

- [Sequential](/storybook/?path=/story/charts-primitives-maplegend--sequential)
- [Diverging](/storybook/?path=/story/charts-primitives-maplegend--diverging)
- [Stepped Ranges](/storybook/?path=/story/charts-primitives-maplegend--stepped-ranges)

## Source

`packages/ui/src/charts/maps/geo/map-legend.tsx`