Map Chart
World map: choropleth and points, zoom and pan. Pro · Charts and analytics › Maps and matrices
World choropleth with point markers on an Equal Earth projection — no tiles, no network.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add map-chartnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { MapChart } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
data | MapChartDatum[] | [] | One value per country; countries without one are drawn as "no data". |
markers | MapChartMarker[] | [] | Points placed by longitude/latitude over the countries. |
color | string | 'var(--ui-chart-1)' | High end of the color scale; any CSS color. Default --ui-chart-1. |
lowColor | string | Low end of the color scale. Default: a faint tint of color. | |
scale | 'linear' | 'log' | 'sqrt' | 'quantize' | 'linear' | linear blends continuously; log and sqrt spread skewed data (populations, traffic) across the ramp; quantize splits the domain into steps equal classes. Default linear. |
steps | number | 5 | Classes of the quantize scale. Default 5. |
domain | [min: number, max: number] | Values mapped to the ends of the scale. Default: the data's minimum and maximum. | |
valueFormatter | ValueFormatter | Formats values in the tooltip, legend and data table; locale number formatting when omitted. | |
markerColor | string | 'var(--ui-chart-3)' | Default --ui-chart-3. |
height | number | Plot height in px. Default: the world's aspect ratio at the current width. | |
zoomable | boolean | true | Zoom with ⌘/Ctrl + scroll, pinch, double-click, the +/− buttons and keys; drag to pan. Default true. |
maxZoom | number | 8 | Default 8. |
showLegend | boolean | true | Color scale under the map (class ranges or a gradient with ticks) plus the "No data" swatch. |
onCountryClick | (country: MapChartCountry) => void | Click or Enter on a country. | |
onMarkerClick | (marker: MapChartMarker) => void | Click or Enter on a marker. | |
locale | string | BCP 47 locale for country names and numbers. Default: the ThemeProvider locale, then the browser's. | |
labels | Partial<MapChartLabels> | Overrides for the built-in English text; keys left out keep their defaults. | |
ariaLabel * | string | Accessible name of the map (also the caption of its sr-only data tables). |
Related components
- Heatmap — Heatmaps
- Tile Map — Lightweight tile map: markers, route, popup cards, zoom
- Cohort Retention Matrix — Cohort retention: heat table, averages, anomalies and notes
- Line Chart — Line charts
- Bar Chart — Bar charts
- Area Chart — Filled area charts
- Scatter Chart — Scatter and bubble charts with a trend line
- Sparkline — Tiny inline charts
- Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
- Candlestick Chart — Stock candlesticks with volume and moving averages
- Donut Chart — Donut charts
- Treemap — Hierarchies as areas, with drill-down
Previous: Heatmap · Next: Tile Map · All Charts and analytics