ChoroplethMap

Live preview

Loading example…

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

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

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

Usage

<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

Source

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