/ux
Components/Charts/MapLegend

MapLegend

Charts

HUD-style legend block for maps — ramp, vertical ramp, or categorical swatches.

Swatch block that reads like a HUD readout. Three variants (ramp, rampVertical, categorical) cover the common cases for every World* component. Pair with WorldChoropleth, WorldHeatmap, or WorldBubbleMap when you need a standalone legend.

Import

import { MapLegend } from "nosible-ux"

Examples

Horizontal ramp

GDP
07142128

Categorical swatches

Region
  • Americas
  • Europe
  • APAC
  • MENA

Vertical ramp

Density
LowMedHigh

Accessibility

The wrapper renders with role="group" and an automatic aria-label derived from title. Colour-coded categories are announced by their text labels so the legend remains readable when contrast or colour differentiation is impaired.

Props

Name TypeDefaultDescription
height
number | undefined—Vertical ramp height in px. Default: `140`.
items
MapLegendCategoricalItem[] | undefined—Categorical swatches — required when `variant="categorical"`.
stops
string[] | undefined—Colour stops for ramp variants. Interpolated linearly.
ticks
string[] | undefined—Tick labels rendered beside/under the ramp. Evenly distributed.
title
string | undefined—Title rendered above the swatch in uppercase Space Mono.
variant
MapLegendVariant | undefined—Legend layout. Default: `"ramp"`.
width
number | undefined—Ramp width in px. Default: `200`.
← All ComponentsGetting Started →