GeographicGenerated from the public API

ChoroplethChart

Plot positions and routes on a plane whose bounds and coordinate meaning you declare.

@luc/ui/charts

What it shows

Show one value per region on a registered geographic map, using colour to compare regions.

Live preview

A six-by-four synthetic grid registered by the page; one region carries no value and is drawn as no-data.

// A map is registered once, globally, before a choropleth renders.
useEffect(() => {
  registerEChartsMap("luc-showcase-grid", gridGeoJson).then(() => setReady(true));
}, []);

<ChoroplethChart
  mapName="luc-showcase-grid"
  regions={regions}
  valueLabel="Index"
  format={{ kind: "number", decimals: 1 }}
  ariaLabel="Values on a grid map"
/>

Usage

The values are prepared by the caller: this component draws the points it is given and computes no statistic of its own, so units, scaling and any summary have to be settled before the data reaches it.

It is drawn by the ECharts engine.

Worked examples with real data are on the family overview: Geographic

import { ChoroplethChart } from "@luc/ui/charts";

// A map is registered once, globally, before a choropleth renders.
useEffect(() => {
  registerEChartsMap("luc-showcase-grid", gridGeoJson).then(() => setReady(true));
}, []);

<ChoroplethChart
  mapName="luc-showcase-grid"
  regions={regions}
  valueLabel="Index"
  format={{ kind: "number", decimals: 1 }}
  ariaLabel="Values on a grid map"
/>

Data contract

Register a map before render, then pass `mapName` and `regions` whose region ids match that map. Values are supplied per region; missing regions are not filled with zero.

Important configuration

Use `valueLabel` and `format` for the measure, state the colour domain, and register the map once before mounting the chart.

Guidelines

When not to use

Do not compare raw counts across regions of very different size without normalising, and do not imply that LUC supplies political boundaries.

Configuration

Exported symbols
Export	Kind	Signature
`ChoroplethChart`	16 documented props	`({ mapName, regions, nameProperty, format, valueLabel, ramp, title, description, state, height, className, ariaLabel, ariaDescription, onReady, onEvent, eager, }: ChoroplethChartProps) => import("@ty…`