World Map Chart

A responsive CarsXE choropleth for country-level values. Pass ISO alpha-2, alpha-3, or numeric codes; bundled world geometry, accessible keyboard inspection, selection, tooltips, and theme-aware colors are handled for you.

Global coverage

Vehicle report volume

Completed vehicle reports across active CarsXE markets. Hover a country or use the arrow keys to inspect the route.

Select a country to inspect its report volume.

Installation

Import from the package. Do not run shadcn add in your app.

tsx

import { WorldMapChart } from "@carsxe/design-system/components/world-map-chart"

Usage

tsx

import { WorldMapChart } from "@carsxe/design-system/components/world-map-chart"

<WorldMapChart
  ariaLabel="Vehicle report volume by country"
  data={[{ countryCode: "US", value: 18420 }]}
/>

Controlled country selection

Selected market: DE

Custom CarsXE scale

Empty and invalid data

Add country report data to draw the map.

API Reference

Prop	Type	Default
ariaLabel	string	—
data	WorldMapDatum[]	—
description	string	—
height	number	360
colors	string[]	CarsXE chart tokens (5 levels)
missingColor	string	var(--border)
showLegend	boolean	true
valueFormatter	(value, datum) => string	value.toLocaleString()
selectedCountryCode	string	—
defaultSelectedCountryCode	string	—
onCountrySelect	(country: WorldMapCountry) => void	—
emptyMessage	string	"No map data available."