Angular ChartsGeographic Areas
angular logo
Enterprise

The Map Shape Series visualises data representing geographic areas such as countries, using colours to denote distinct series or the magnitude of the values.

Simple Map Shapes

To create a Map Shape Series, use the map-shape series type and provide data and topology. These can be provided in either the chart or series objects.

topology: topology,
series: [
    {
        type: 'map-shape',
        data: pacific,
        idKey: 'name',
        title: 'Pacific'
    },
    // ...
],
legend: {
    enabled: true,
}

In this example:

  • The topology is provided once on the chart level, and the data is provided in each series.
  • idKey defines the property key in the data that will be matched against the property value in the topology. See Connecting Data to Topology for more details.
  • title provides a name for the series, and is used in the Legend and Tooltips.

Colour Scale

To colour the shapes based on the magnitude of the data, use colorKey.

series: [
    {
        type: 'map-shape',
        idKey: 'name',
        colorKey: 'gdp',
    },
],

In this configuration:

  • colorKey is set to 'gdp', which supplies numerical values for the colour scale.

See Colour Range and Gradient Legend for more details about customising these features.

Labels

series: [
    {
        type: 'map-shape',
        idKey: 'name',
        labelKey: 'code',
    },
],

In this configuration:

  • labelKey defines the variable used for the labels.

See Label options for options for handling long labels.

Background Shapes

The Map Shape Background series displays all the shapes of a topology without requiring any data.

This can be useful to show disabled Map Shape Series when toggled off in the legend, or to provide context to Map Line Series and Map Marker Series.

topology,
series: [
    {
        type: 'map-shape-background',
    },
    // ...
],

As this is a background series rather than a data series, many normal series behaviours are disabled - including interactivity and appearing in the legend.

API Reference