shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartChoroplethPatterns } from "@/components/charts/chart-choropleth-patterns";<ChartChoroplethPatterns />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
PatternLines
idstring
Id of the pattern, referenced as url(#id) in a fill.
widthnumber
Width of the pattern tile in px.
heightnumber
Height of the pattern tile in px.
className?string
Class name added to the drawn shapes.
background?string
Background color of the tile. No background is drawn when omitted.
stroke?string
Stroke color of the shapes.
strokeWidth?number | string
Stroke width of the shapes.
- Type
number | string
strokeDasharray?string | number
SVG dash pattern of the stroke.
- Type
string | number
strokeLinecap?PatternLinecap
Line cap of the stroke: "square", "butt", "round" or "inherit".
- Default
"square"
shapeRendering?string | number
SVG shape-rendering of the shapes.
- Type
string | number- Default
"auto"
orientation?PatternOrientationType[]
Directions of the lines: any of "vertical", "horizontal", "diagonal" and "diagonalRightToLeft".
- Default
["vertical"]
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).