Charts
Globe
Just the globe. Country codes resolve to coordinates, markers scale with the value, and it names the shortfall without WebGL.
Props
| Property | Type | Default | Description |
|---|---|---|---|
locations | GlobeLocation[] | — | { code?, label?, value, lat?, lon? }. code is an ISO 3166-1 alpha-2 country code, resolved to that country's centroid — which is what providers return. Pass lat/lon to place anything else. Rows that cannot be placed are dropped from the drawing and counted in the note under it. |
variant | "spin" | "drag" | "focus" | "arcs" | "still" | "spin" | spin rotates continuously. drag hands rotation to the pointer and the arrow keys. focus swings to each of the busiest locations in turn. arcs draws every location's route into hub. still holds one framing — which is also what the moving variants degrade to under prefers-reduced-motion. |
dark | boolean | — | Defaults to the nearest [data-ak-theme], so an in-dashboard globe follows the dashboard, then to the OS preference. |
markerColor | string | "var(--ak-chart-1)" | Any CSS colour. Resolved through a probe node, so a var() chain or a token works and not just a hex. |
size | number | — | Square edge in CSS pixels. Omit to fill the container, which is measured with a ResizeObserver so a column change resizes it even when the window does not. |
speed | number | 1 | Multiplier on the spin rate. |
hub | [number, number] | — | Arc destination as [lat, lon]. Defaults to the busiest location. |
focusDwellMs | number | 3200 | How long variant="focus" holds on each location. |
ariaLabel | string | — | Overrides the generated summary. The default names the count and the three busiest locations, since the canvas itself reads as nothing. |
emptyLabel | string | "No location data." | Shown for an empty locations array. |
className | string | — | Outer wrapper. |