shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartRouteMapDefault } from "@/components/charts/chart-route-map-default";<ChartRouteMapDefault />API Reference
RouteMapChart
dataRouteMapData
The places and the routes between them. A route naming a place that isn't there is left out.
geography?FeatureCollection<Geometry, Readonly<Record<string, unknown>> | null>
The countries to draw under the routes (GeoJSON; RouteMapLand styles them), such as the kit's worldCountries.
- Type
FeatureCollection<Geometry, Readonly<Record<string, unknown>> | null>
projection?SpatialProjection
The map projection.
- Default
"equal-earth"
rotate?readonly [number, number]
Rotation of the projection, [longitude, latitude] in degrees.
fit?"sphere" | "geography" | "data"
What fills the plot: the whole world, the geography's features, or the places (a region's routes).
- Type
"sphere" | "geography" | "data"- Default
"sphere"
aspectRatio?string
Aspect ratio of the chart as "width / height".
- Default
"2 / 1"
margin?Partial<SpatialMargin>
Space around the plot in pixels. Any side you omit keeps its default.
- Type
Partial<SpatialMargin>
animate?boolean
Play the entrance animation.
- Default
true
animationDuration?number
Length of the entrance sweep in milliseconds: the time from the first mark starting to the last one.
- Default
900
revealSignature?string
Changing this value replays the entrance animation.
status?ChartStatus
"loading" draws a pulsing skeleton of the chart's shape in place of its marks (the axes, grid and land stay) and ignores the pointer; switching to "ready" plays the entrance.
- Default
"ready"
loadingLabel?string
Text shown centered over the chart, with a shimmer, while status is "loading". Nothing is shown when it is unset or empty.
className?string
Additional class name for the chart container.
children?ReactNode
The chart's carriers: its layers, axes, grid, tooltip and legend.
ariaLabel?string
Accessible label of the chart.
ariaDescription?string
Longer accessible description of the chart.
RouteMapGraticule
outline?boolean
Draw the world's outline too.
- Default
true
step?readonly [number, number]
Degrees between the lines, [longitude, latitude].
- Default
[20, 20]
stroke?string
Color of the lines.
- Default
"var(--chart-graticule)"
strokeWidth?number
Width of the lines, in pixels.
- Default
0.5
RouteMapLand
fill?string
Fill of the land.
- Default
"var(--muted)"
stroke?string
Color of the borders between countries.
- Default
"var(--chart-background)"
strokeWidth?number
Width of the borders, in pixels.
- Default
0.5
RouteMapRoutes
color?string
Color of the routes.
- Default
"var(--chart-1)"
colorKey?string
Key of each route's category: each category takes the palette in order of appearance (--chart-1, --chart-2…).
widthRange?readonly [number, number]
Width of the lightest and the heaviest route, in pixels (by value).
- Default
[1, 4]
opacity?number
Opacity of the routes at rest.
- Default
0.8
inactiveOpacity?number
Opacity of the other marks while one is hovered or focused.
- Default
0.25
fadeOnHover?boolean
Dim the layer's other marks while one is hovered or focused.
- Default
true
RouteMapPlaces
radius?number
Radius of the dots, in pixels.
- Default
3.5
color?string
Fill of the dots.
- Default
"var(--chart-foreground)"
RouteMapTooltip
content?(args: RouteMapTooltipArgs) => ReactNode
Custom tooltip content. Replaces the default title and rows, inside the same panel.
- Type
(args: RouteMapTooltipArgs) => ReactNode
formatValue?(value: number) => string
Formats the value row of the default content.
- Type
(value: number) => string- Default
the number with thousands separators
valueLabel?string
The label of the value row of the default content.
className?string
Additional class name for the tooltip panel.
panelStyle?CSSProperties
Inline styles merged onto the tooltip panel.
backgroundColor?string
Background color of the tooltip panel. Overrides the theme's popover color.
