Geo area chart

A geo area chart visualizes data by geographic regions (countries, states, …) on a map. Each region takes its color from a measure value or an attribute value, so you can compare regions, for example, revenue by country.

Buckets

Sorting

GeoAreaChart applies no default sorting. Pass sortBy to sort the data of the area layer. The category legend lists the segmentBy values in alphabetical order, whatever sortBy you pass.

Configuration

Pass these options in the config prop (IGeoAreaChartConfig). See Configuration on the Geo chart page for details.

Limits

• A geo area chart renders up to 50,000 data points, or the number you set in limit. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• The chart draws each region once. When a region has more than one segmentBy value, it takes the color of the first one in the data.

Notes

• GeoAreaChart is a convenience wrapper over GeoChart for the single-area-layer scenario.
• Geo charts are MapLibre-based and do not require a Mapbox access token. If you are upgrading an older app, see Geo pushpin chart for details about legacy Mapbox compatibility (LegacyGeoPushpinChart, deprecated mapboxToken).
• Geo charts start a MapLibre web worker. You don’t need to configure your bundler; for Content Security Policy requirements and self-hosting the worker, see Map worker, bundlers, and CSP.

Structure

import "@gooddata/sdk-ui-geo/styles/css/main.css";
import { GeoAreaChart } from "@gooddata/sdk-ui-geo";

<GeoAreaChart
    area={<attribute>}
    color={<measure>}
    segmentBy={<attribute>}
    config={<geo-area-config>}
    filters={<filters>}
/>

Example

import "@gooddata/sdk-ui-geo/styles/css/main.css";
import { GeoAreaChart } from "@gooddata/sdk-ui-geo";
import * as Md from "./catalog.js";

<div style={{ height: 600, width: 900 }}>
    <GeoAreaChart area={Md.Country.Name} color={Md.Revenue.Sum} />
</div>;

Props