Choropleth Chart

Plot

The plot is a part of keen.io/charts package and can be used in React environment as standalone component.

API

Property Description Type Default
data Chart data Record<string, any> -
valueKey Key used to pick value property from data string[] [“value”]
geoKey Key used to match map topology with data string -
labelSelector Key used to set label string -
topology Collection of GeoJSON features GeoJSON -
colorMode Color mode enum[continuous, discrete] “continuous”
projection Type of geo projection Projection “mercator”
projectionTranslation Translate projection x and y [number, number] [0, 0, ]
projectionScale Scale of map projection number 100
projectionRotation Spherical rotation to the specified angles [number, number, number] [0, 0, 0]
colorSteps Amount of steps used for color calculation number 2
valuesRange Range used for filtering map values RangeType { min?: null, max?: null }
theme Theme used for chart styling Theme Keen Theme
svgDimensions SVG height and width Dimension “auto”
margins SVG margins Margins { top: 30, right: 20, bottom: 30, left: 40 }

Types

Interfaces related with Choropleth Chart widget.

type Projection =
  | 'mercator'
  | 'geoAlbersUsa'
  | 'orthographic'
  | 'azimuthalEqualArea'
  | 'equalEarth'
  | 'naturalEarth';

Theme

List of theme properties supported by Choropleth Chart widget.

Property Description Type
colors Colors applied on map regions string[]
tooltip Tooltip settings Tooltip
choropleth.map Map settings { stroke: string}
choropleth.sphere Sphere settings { enabled: boolean, backgroundColor: string}
choropleth.graticule Graticule settings { enabled: boolean, color: string}

Playground