ChoroplethCanvas

@nivo/geomapcanvas
svgcanvas

A canvas implementation of the Choropleth component, should be used used when you have complex geometries as it offers better performance than its SVG counterpart.

Please note that because the features file is pretty huge, it's not included in the generated code, you can find the file used for this example here, you'll have to pass the features array to the features property.

The responsive alternative of this component is ResponsiveChoropleth.

Actions Logs
Start interacting with the chart to log actions
Base
numberrequired
Chart width.
numberrequired
Chart height.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvgcanvas
objectoptional
px
px
px
px
Chart margin.
string | Functionoptionaldefault:'id'
Label accessor.
string | Functionoptionaldefault:'value'
Value accessor.
string | Functionoptionaldefault:'value'
Value formatter.
number[]required
Defines uppper and lower bounds of color shading
Projection
optionaldefault:'mercator'
mercator
Defines the projection to use.
numberoptionaldefault:100
Projection scale.
[number, number]optionaldefault:[0.5, 0.5]
value[0.5, 0.5]
px
px
Projection x/y translation.
[number, number, number]optionaldefault:[0, 0, 0]
value[0, 0, 0]
Projection rotation.
Style
optional
Define style for common elements such as labels, axes…
numberoptionaldefault:0
px
Control border width.
string | object | Functionoptionaldefault:'#000000'
inheritthemecustom
#101b42
Method to compute border color.
object[]optional
Define patterns and gradients.
supportsvgcanvas
object[]optional
Define rules to apply patterns and gradients
supportsvgcanvas
string | Function | string[]optionaldefault:'nivo'
Select...
Defines color range.
stringoptionaldefault:'nivo'
   #101b42
Defines the color to use for features without value.
Graticule
booleanoptionaldefault:false
   Enable meridians and parallels, useful for showing projection distortion.
numberoptionaldefault:0.5
px
Control meridians and parallel lines width.
stringoptionaldefault:'#999999'
   rgba(0, 0, 0, .2)
Control meridians and parallel lines color.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
Functionoptional
onClick handler, it receives clicked node data and style plus mouse event.
Functionoptional
Custom tooltip component.
booleanoptional
   Showcase custom tooltip.
Customization
Array<'graticule' | 'features' | Function>optionaldefault:['graticule', 'features']
Defines the order of layers.
Legends
{Array<object>}optional
Optional chart's legends.
add legend
legends[0]remove
stringoptional
bottom-left
Defines legend anchor relative to chart's viewport.
'column' | 'row'optional
Legend direction, must be one of 'column', 'row'.
booleanoptional
   Justify symbol and label.
numberoptional
px
Legend block x translation.
numberoptional
px
Legend block y translation.
numberrequired
px
Legend item width.
numberrequired
px
Legend item height.
numberoptional
px
Spacing between each item.
numberoptional
px
Item symbol size.
stringoptional
left-to-right
Item layout direction.