shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartChoroplethValues } from "@/components/charts/chart-choropleth-values";<ChartChoroplethValues />API Reference
ChoroplethChart
dataFeatureCollection<Geometry, ChoroplethFeatureProperties>
GeoJSON FeatureCollection to draw, with one feature per region. Pass GeoJSON objects: TopoJSON is not read, so convert it first (for example with topojson-client's feature()).
- Type
FeatureCollection<Geometry, ChoroplethFeatureProperties>
margin?Partial<Margin>
Chart margins in pixels. Any side you omit keeps its default.
- Type
Partial<Margin>- Default
{ top: 0, right: 0, bottom: 0, left: 0 }
animationDuration?number
Duration of the enter animation in milliseconds.
- Default
800
enterTransition?EnterTransition
Enter transition (a spring or a cubic-bezier tween), in seconds.
- Default
a tween of `animationDuration` on the reveal curve
revealSignature?string
Changing this value replays the enter animation.
- Default
""
aspectRatio?string
Aspect ratio of the chart as "width / height".
- Default
"16 / 9"
scale?number
Projection scale of the Mercator projection. When omitted it follows the chart width.
center?[number, number]
Geographic center of the map as [longitude, latitude].
- Default
[0, 20]
translate?[number, number]
Pixel offset of the projection center as [x, y]. When omitted the map is centered in the chart.
zoomEnabled?boolean
Enable zoom and pan with the mouse wheel, pinch, and drag.
- Default
false
zoomMin?number
Minimum zoom scale.
- Default
0.5
zoomMax?number
Maximum zoom scale.
- Default
4
initialZoom?TransformMatrix
Initial zoom transform.
- Default
the identity transform (no zoom, no pan)
className?string
Additional class name for the chart container.
- Default
""
childrenReactNode
ChoroplethFeatureComponent, ChoroplethGraticule and ChoroplethTooltip to configure the map, plus any elements that call useChoropleth() or useChoroplethZoom().
ariaLabel?string
Accessible label of the chart.
- Default
"Choropleth chart"
ariaDescription?string
Longer accessible description of the chart.
ChoroplethFeatureComponent
fill?string
Solid fill color for every feature. Takes precedence over getFeatureColor.
- Default
a cycle of the `--chart-scale-01` to `--chart-scale-05` variables, by feature index
stroke?string
Border color of the features.
- Default
"var(--bkm-background)"
strokeWidth?number
Border width of the features in pixels.
- Default
0.5
fadedOpacity?number
Opacity of the other features while one is hovered or focused.
- Default
0.4
getFeatureColor?(feature: ChoroplethFeature, index: number) => string
Returns a fill color per feature. Used when fill is not set.
- Type
(feature: ChoroplethFeature, index: number) => string
patterns?ReactNode
Pattern definitions (SVG <pattern> elements) that features can reference by id through getFeaturePattern.
getFeaturePattern?(feature: ChoroplethFeature, index: number) => string | null | undefined
Returns the id of a pattern to fill a feature with, or null/undefined to use the color. A pattern wins over fill and getFeatureColor.
- Type
(feature: ChoroplethFeature, index: number) => string | null | undefined
ChoroplethTooltip
content?(props: { feature: ChoroplethFeature; index: number }) => ReactNode
Custom tooltip content for a feature. Replaces the default name and value.
- Type
(props: { feature: ChoroplethFeature; index: number }) => ReactNode
formatValue?(value: number) => string
Formats the value in the default tooltip.
- Type
(value: number) => string- Default
integer formatting
getFeatureName?(feature: ChoroplethFeature, index: number) => string
Returns the tooltip title of a feature.
- Type
(feature: ChoroplethFeature, index: number) => string- Default
the feature's `properties.name`, or "Feature <index>"
getFeatureValue?(feature: ChoroplethFeature, index: number) => number | undefined
Returns the value shown for a feature. When it returns undefined the value row is hidden.
- Type
(feature: ChoroplethFeature, index: number) => number | undefined
valueLabel?string
Label of the value row.
- Default
"Value"
className?string
Additional class name for the tooltip panel.
panelStyle?CSSProperties
Inline styles for the tooltip panel, for example a blur or border.
backgroundColor?string
Background color of the tooltip panel (a CSS variable or a color).