MapLegend

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

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

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

Usage

<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
• Diverging
• Stepped Ranges

Source

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