> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Geo area chart

> Show geographic data as colored regions on a map with the GeoAreaChart component.

API reference: [GeoAreaChart()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.geoareachart/index.md) (function)

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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#buckets)

| Prop | Required | Takes | What it does |
| --- | --- | --- | --- |
| `area` | Yes | One attribute | Draws one region per value. Use an attribute with a geo area label in the logical data model (LDM). Values that don't match a region aren't drawn. |
| `color` | No | One measure | Colors the regions by value, from a light shade for the lowest value to the full color for the highest. |
| `segmentBy` | No | One attribute | Colors the regions by attribute value, one color per value, and adds a category legend. When set, it decides the colors instead of `color`. |
| `filters` | No | Filters | Limits the data the chart shows. |

## [Sorting](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#sorting)

[`GeoAreaChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.geoareachart/index.md) 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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#configuration)

Pass these options in the `config` prop ([`IGeoAreaChartConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartconfig/index.md)). See [Configuration](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-chart/index.md#configuration) on the Geo chart page for details.

| Option | What it changes |
| --- | --- |
| `colorPalette`, `colorMapping` | Colors of the regions. A `color` measure uses shades of the first palette color, or of the color that `colorMapping` sets for the `area` attribute. `segmentBy` values take one palette color each. |
| `legend` | `enabled` (default `true`) shows or hides the legend. `position` (default `"auto"`) places it in a corner: `"top-left"`, `"top-right"`, `"bottom-left"`, or `"bottom-right"`. |
| `areas` | `fillOpacity` (default `0.7`), `borderColor` (default `"#FFFFFF"`), and `borderWidth` (default `1`) of the regions. |
| `viewport` | `area` sets the initial view: `"auto"` fits the data, which is also what happens when you set no view; `"world"` or a continent such as `"continent_eu"` shows that region. `frozen: true` locks map interaction. `navigation.pan` and `navigation.zoom` (both default `true`) turn panning and zooming on or off. |
| `bounds`, `center`, `zoom` | A custom initial view. `bounds` takes priority over `center` and `zoom`. They apply only when `viewport.area` is `"custom"` or not set; any other `viewport.area`, including `"auto"`, overrides all three. |
| `maxZoomLevel` | Maximum zoom level (default `8`). `null` removes the limit. |
| `mapStyle` | A MapLibre style URL or inline style specification, used instead of the base map from the backend. |
| `cooperativeGestures` | With `true` (default), zooming with the mouse wheel needs Ctrl or ⌘, and moving the map on a touch screen needs two fingers. |
| `separators` | Thousands and decimal separators in the tooltip values. |
| `limit` | Maximum number of data points. See [Limits](#limits). |

## [Limits](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#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`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.datatoolargetodisplaysdkerror/index.md). 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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#notes)

- [`GeoAreaChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.geoareachart/index.md) is a convenience wrapper over [`GeoChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.geochart/index.md) 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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-pushpin-chart/index.md#map-rendering) for details about legacy Mapbox compatibility ([`LegacyGeoPushpinChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.legacygeopushpinchart/index.md), 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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-chart/index.md#map-worker-bundlers-and-csp).

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#structure)

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#example)

```tsx
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](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/geo-area-chart/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`area`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartprops/index.md#igeoareachartpropsarea) | [`AttributeOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributeorplaceholder/index.md) | Yes | Attribute containing area identifiers (country, state, region, ...). | — |
| [`additionalLayers`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeosinglelayerwrapperprops/index.md#igeosinglelayerwrapperpropsadditionallayers) | [`IGeoLayer`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeolayer/index.md)`[]` | No | Layers rendered after the primary layer (e.g., overlays). | [`IGeoSingleLayerWrapperProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeosinglelayerwrapperprops/index.md) |
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Backend used for data execution. Falls back to BackendProvider when omitted. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`color`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartbaseprops/index.md#igeoareachartbasepropscolor) | [`AttributeMeasureOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributemeasureorplaceholder/index.md) | No | Measure or attribute used for color encoding. | [`IGeoAreaChartBaseProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartbaseprops/index.md) |
| [`config`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartbaseprops/index.md#igeoareachartbasepropsconfig) | [`IGeoAreaChartConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartconfig/index.md) | No | Configuration specific to area layers. | [`IGeoAreaChartBaseProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartbaseprops/index.md) |
| [`drillableItems`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsdrillableitems) | [`ExplicitDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.explicitdrill/index.md)`[]` | No | Configure drillability; e.g. which parts of the visualization can be interacted with. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropserrorcomponent) | `ComponentType<`[`IErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md)`>` | No | React component to display in the event when there is an error with either obtaining the data from backend or with the data itself. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`execConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsexecconfig) | [`IExecutionConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iexecutionconfig/index.md) | No | Additional execution configuration forwarded to backend. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`exportTitle`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsexporttitle) | `string` | No | Set title to use for exported files. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`filters`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsfilters) | [`NullableFiltersOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.nullablefiltersorplaceholders/index.md) | No | Filters applied to every layer execution. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsloadingcomponent) | `ComponentType<`[`ILoadingProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md)`>` | No | React component to display while loading data from the backend. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`locale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropslocale) | `string` | No | Set Locale for visualization localization. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`onBoundsChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsonboundschanged) | [`BoundsChangedCallback`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.boundschangedcallback/index.md) | No | Callback fired when the map visible bounds change. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`onCenterPositionChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsoncenterpositionchanged) | [`CenterPositionChangedCallback`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.centerpositionchangedcallback/index.md) | No | Callback fired when the map center changes. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`onDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondataview) | [`OnDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ondataview/index.md) | No | _(Alpha)_ Called when the visualization loads a DataView, i.e. it receives data from the backend. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondrill) | [`OnFiredDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onfireddrillevent/index.md) | No | Called when user triggers a drill on a visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonerror) | [`OnError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onerror/index.md) | No | Called when an error occurs while loading data for the visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonexportready) | [`OnExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onexportready/index.md) | No | Called when the visualization is ready to be exported. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonloadingchanged) | [`OnLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onloadingchanged/index.md) | No | Called when loading status of the visualization changes - vis starts or stops loading | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onViewportInteractionEnd`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsonviewportinteractionend) | [`ViewportInteractionEndCallback`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.viewportinteractionendcallback/index.md) | No | Callback fired when a user-triggered viewport interaction finishes. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`onZoomChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsonzoomchanged) | [`ZoomChangedCallback`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.zoomchangedcallback/index.md) | No | Callback fired when map zoom changes. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`placeholdersResolutionContext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsplaceholdersresolutioncontext) | `object` | No | Resolution context for composed placeholders. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`segmentBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartbaseprops/index.md#igeoareachartbasepropssegmentby) | [`AttributeOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributeorplaceholder/index.md) | No | Optional segment attribute that drives category legend items. | [`IGeoAreaChartBaseProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeoareachartbaseprops/index.md) |
| [`sortBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeosinglelayerwrapperprops/index.md#igeosinglelayerwrapperpropssortby) | [`SortsOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.sortsorplaceholders/index.md) | No | Sorting applied to the **primary layer** execution definition. | [`IGeoSingleLayerWrapperProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeosinglelayerwrapperprops/index.md) |
| [`theme`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropstheme) | [`ITheme`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.itheme/index.md) | No | Theme override. Defaults to the nearest ThemeProvider. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md#igeocommonexecutionpropsworkspace) | `string` | No | Workspace identifier. Falls back to WorkspaceProvider when omitted. | [`IGeoCommonExecutionProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-geo/sdk-ui-geo.igeocommonexecutionprops/index.md) |