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
.
Chart width.
Chart height.
'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
'id'
Label accessor.
'value'
Value accessor.
'value'
Value formatter.
Defines uppper and lower bounds of color shading
'mercator'
Defines the projection to use.
100
Projection scale.
0.5
, 0.5
][0.5
, 0.5
]
Projection x/y translation.
0
, 0
, 0
][0
, 0
, 0
]
Projection rotation.
Define style for common elements such as labels, axes…
0
Control border width.
'#000000'
#101b42
Method to compute border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
'nivo'
Defines color range.
'nivo'
#101b42
Defines the color to use for features without value.
false
Enable meridians and parallels, useful for showing projection distortion.
0.5
Control meridians and parallel lines width.
'#999999'
rgba(0, 0, 0, .2)
Control meridians and parallel lines color.
true
Enable/disable interactivity.
onClick handler, it receives clicked node data and style plus mouse event.
Custom tooltip component.
Showcase custom tooltip.
'graticule'
, 'features'
]Defines the order of layers.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.