GeoChart
Interactive world map visualization with zoom, pan, and region presets. Perfect for displaying geographic data like sales by country, user distribution, or regional metrics.
Configuration
Zoom & Pan
Display Options
Usage Example
<GeoChart
data={[
{ id: 'USA', name: 'United States', value: 4500 },
{ id: 'CHN', name: 'China', value: 3200 },
{ id: 'DEU', name: 'Germany', value: 2100 },
// ... more countries
]}
region="world-no-antarctica"
colorScheme="sequential"
height="auto"
aspectRatio={1.8}
showTooltip={true}
showLegend={true}
legendPosition="top"
zoom={{
enabled: true,
showControls: true,
wheelZoom: true,
controlsPosition: 'bottom-left',
}}
onRegionClick={(item, geo) => {
console.log('Clicked:', geo.properties.name);
}}
/>Available Regions
Use the region prop to focus on specific areas of the world. Each region comes with optimized center, zoom, and projection settings.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | GeoChartDataItem[] | Required | Array of country data with id (ISO 3166-1 alpha-3), name, and value |
region | GeoMapRegion | 'world-no-antarctica' | Map region preset: world, world-no-antarctica, europe, asia, etc. |
height | number | 'auto' | 400 | Chart height in pixels or 'auto' for aspect ratio based |
aspectRatio | number | 2 | Width/height ratio when height is 'auto' |
colorScheme | ChartColorScheme | 'sequential' | Color scheme for data visualization |
zoom | GeoZoomConfig | { enabled: false } | Zoom and pan configuration object |
showTooltip | boolean | true | Show tooltip on hover |
showLegend | boolean | true | Show value legend |
onRegionClick | (item, geo) => void | — | Callback when a country is clicked |