shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartBubbleMapCategories } from "@/components/charts/chart-bubble-map-categories";<ChartBubbleMapCategories />API Reference
BubbleMapChart
datareadonly SpatialRow[]
The places: one row per bubble, with a longitude, a latitude and a value.
geography?FeatureCollection<Geometry, Readonly<Record<string, unknown>> | null>
The countries to draw under the bubbles (GeoJSON; BubbleMapLand styles them), such as the kit's worldCountries.
- Type
FeatureCollection<Geometry, Readonly<Record<string, unknown>> | null>
longitudeKey?string
Key of each row's longitude, in degrees.
- Default
"longitude"
latitudeKey?string
Key of each row's latitude, in degrees.
- Default
"latitude"
nameKey?string
Key of each row's name, the tooltip's title.
- Default
"name"
projection?SpatialProjection
The map projection.
- Default
"equal-earth"
rotate?readonly [number, number]
Rotation of the projection, [longitude, latitude] in degrees: [-10, 0] centers 10° east.
fit?"sphere" | "geography" | "data"
What fills the plot: the whole world, the geography's features (a region), or the places in data (with room for the bubbles).
- 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.
BubbleMapLand
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
BubbleMapBubbles
dataKeystring
Key of each row's value: the bubble's area.
maxRadius?number
Radius of the largest bubble, in pixels.
- Default
22
minRadius?number
Radius of the smallest, in pixels.
- Default
2
colorKey?string
Key of each row's category: each category takes the palette in order of appearance (--chart-1, --chart-2…).
color?string
The bubbles' fill without colorKey.
fillOpacity?number
Opacity of the bubbles' fill.
- Default
0.65
stroke?string
Color of the bubbles' outline.
- Default
"var(--chart-background)"
fadeOnHover?boolean
Dim the layer's other marks while one is hovered or focused.
- Default
true
inactiveOpacity?number
Opacity of the other marks while one is hovered or focused.
- Default
0.35
BubbleMapTooltip
content?(args: BubbleMapTooltipArgs) => ReactNode
Custom tooltip content. Replaces the default title and rows, inside the same panel.
- Type
(args: BubbleMapTooltipArgs) => 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.
BubbleMapLegend
title?string
A title before the legend's items.
formatValue?(value: number) => string
Formats the values the legend shows.
- Type
(value: number) => string- Default
the number, thousands abbreviated (`2k`)
align?"start" | "center" | "end"
Where the legend sits in the row under the plot.
- Type
"start" | "center" | "end"- Default
"center"
className?string
Additional class name for the legend.
