---
title: "Maps - Routes and Connections"
enterprise: true
framework: react
version: "14.1.0"
---

# Maps - Routes and Connections

The Map Line Series visualises geographic lines, such as roads or flight paths, with the ability to vary width and colour to represent data values.

## Simple Map Lines

#### Lines

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { backgroundTopology } from "./backgroundTopology";
import { data } from "./data";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "UK Motorways",
    },
    data,
    topology,
    series: [
      {
        type: "map-shape-background",
        topology: backgroundTopology,
      },
      {
        type: "map-line",
        idKey: "name",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Lines](https://www.ag-grid.com/charts/reactFunctionalTs/map-lines/examples/lines)

To create a Map Line Series, use the `map-line` series type and provide data and [topology](https://www.ag-grid.com/charts/react/map-topology/). These can be provided in either the chart or series objects.

> **Note**
>
> A Map Line Series should be combined with a [Map Shape Background Series](https://www.ag-grid.com/charts/react/map-shapes/#background-shapes).

```js
data: data,
topology: topology,
series: [
    {
        type: 'map-shape-background',
        topology: backgroundTopology,
    },
    {
        type: 'map-line',
        idKey: 'name',
    },
]
```

In this configuration:

- Both the `topology` and `data` for the `map-line` series are provided on the chart level.
- `idKey` defines the property key in the data that will be matched against the property value in the topology. See [Connecting Data to Topology](https://www.ag-grid.com/charts/react/map-topology/#connecting-data-to-topology) for more details.
- The `map-shape-background` series has its topology defined on the series level.

## Colour Scale

#### Heatmap

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  GradientLegendModule,
  MapLineSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { backgroundTopology } from "./backgroundTopology";
import { data } from "./data";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  GradientLegendModule,
  MapLineSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "UK Motorways",
    },
    data,
    topology,
    series: [
      {
        type: "map-shape-background",
        topology: backgroundTopology,
      },
      {
        type: "map-line",
        idKey: "name",
        colorKey: "dailyVehicles",
        colorName: "Daily Vehicles",
      },
    ],
    gradientLegend: {
      scale: { label: { format: ".2s" } },
      position: "right-top",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Heatmap](https://www.ag-grid.com/charts/reactFunctionalTs/map-lines/examples/heatmap)

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

```js
{
    series: [
        {
            type: 'map-line',
            idKey: 'name',
            colorKey: 'dailyVehicles',
            colorName: 'Daily Vehicles',
        },
    ],
}
```

In this configuration:

- `colorKey` is set to 'dailyVehicles', which supplies numerical values for the Colour Scale.
- `colorName` is optional and configures the display name reflected in [Tooltips](https://www.ag-grid.com/charts/react/tooltips/).

> **Note**
>
> See the [Colour Scale](https://www.ag-grid.com/charts/react/colour-scale/) page for more details about customising colours, discrete bins, and the Gradient Legend.

## Proportional Line Width

#### Stroke Width

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { backgroundTopology } from "./backgroundTopology";
import { data } from "./data";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "UK Motorways",
    },
    data,
    topology,
    series: [
      {
        type: "map-shape-background",
        topology: backgroundTopology,
      },
      {
        type: "map-line",
        idKey: "name",
        sizeKey: "dailyVehicles",
        sizeName: "Daily Vehicles",
        minStrokeWidth: 1,
        maxStrokeWidth: 3,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Stroke Width](https://www.ag-grid.com/charts/reactFunctionalTs/map-lines/examples/stroke-width)

To vary the width of the line to denote the magnitude of the data values use `sizeKey`, `minStrokeWidth` and `maxStrokeWidth`.

```js
{
    series: [
        {
            type: 'map-line',
            idKey: 'name',
            sizeKey: 'dailyVehicles',
            sizeName: 'Daily Vehicles',
            minStrokeWidth: 1,
            maxStrokeWidth: 3,
        },
    ],
}
```

In this configuration:

- `sizeKey` is set to 'dailyVehicles', which supplies numerical values for the size scale.
- `sizeName` is optional and configures the display name reflected in [Tooltips](https://www.ag-grid.com/charts/react/tooltips/).
- `minStrokeWidth` is used for the smallest value in the size scale. It defaults to `strokeWidth` when not set.
- `maxStrokeWidth` is used for the largest value in the size scale.

When `sizeKey` is not set, `strokeWidth` is used as the fixed width for every line.

## Background Lines

The Map Line Background Series displays all the lines of a topology without requiring any data.

This can be useful to provide context for other series.

#### Backgrounds

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapLineBackgroundSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { backgroundTopology } from "./backgroundTopology";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapLineBackgroundSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "UK Motorways",
    },
    series: [
      {
        type: "map-shape-background",
        topology: backgroundTopology,
      },
      {
        type: "map-line-background",
        topology,
      },
    ],
    overlays: {
      noData: { text: "" },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Backgrounds](https://www.ag-grid.com/charts/reactFunctionalTs/map-lines/examples/backgrounds)

```js
{
    series: [
        {
            type: 'map-line-background',
            topology: backgroundTopology,
        },
        // ...
    ],
}
```

> **Note**
>
> 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

#### Map Line

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'map-line' |  | Configuration for the Map Line Series. |
| topology | GeoJSON |  | GeoJSON data. |
| topologyIdKey | string | name | The property to reference in the topology to match up with data. |
| title | string |  | The title to use for the series. |
| legendItemName | string |  | The text to display in the legend for this series. If multiple series share this value, they will be merged for the legend toggle behaviour. |
| id | string | auto-generated value | Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value. |
| context | ContextDefault |  | Context object to use in callbacks. |
| data | DatumDefault[] |  | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
| visible | boolean |  | Whether to display the series. |
| cursor | string |  | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. |
| selection | AgSelectionOptions |  | Configuration for data selection. |
| selection.enabled | boolean |  | Set to `true` to enable the data-selection on this series. |
| selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. |
| selection.selectedItem | AgSelectionStyleOptions |  | Styling options for selected items. |
| selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.selectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedItem | AgSelectionStyleOptions |  | Styling options for unselected items. |
| selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedSeries | AgSelectionStyleOptions |  | Styling options for series with no selections when there is at least one other selected series. |
| selection.unselectedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.unselectedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |
| showInLegend | boolean |  | Whether to include the series in the legend. |
| listeners | AgSeriesListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |
| idKey | DatumKey |  | The name of the node key containing the id value. |
| sizeKey | DatumKey |  | The key to use to retrieve size values from the data, used to control the width of the stroke. |
| colorKey | DatumKey |  | The name of the node key containing the colour value. This value (along with `colorScale` config) will be used to determine the colour of the stroke. |
| labelKey | DatumKey |  | The key to use to retrieve values from the data to use as labels on top of lines. |
| idName | string |  | A human-readable description of the id-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| sizeName | string |  | A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| colorName | string |  | A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| labelName | string |  | A human-readable description of the label values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| minStrokeWidth | PixelSize |  | Determines the smallest width a stroke can be in pixels when `sizeKey` is present. Defaults to `strokeWidth` when not set. |
| maxStrokeWidth | PixelSize |  | Determines the largest width a stroke can be in pixels when `sizeKey` is present. |
| sizeDomain | Array<number \| bigint> |  | Explicitly specifies the extent of the domain of `sizeKey` values to map onto the `[minStrokeWidth, maxStrokeWidth]` range.  Reverse the bounds (e.g. `[100, 0]`) to invert the mapping so that larger values produce thinner strokes. |
| label | AgMapLineSeriesLabel |  | Configuration for the labels shown on top of the line. |
| label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| label.format | string |  | Format string used when rendering labels. |
| label.itemStyler | Styler |  | Function used to style individual datum labels. |
| label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| label.fontFamily | FontFamily |  | The font family for text elements. |
| label.fontStyle | FontStyle |  | The style to use for text elements. |
| label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| label.border | BorderOptions |  | Stroke options for the box border. |
| label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| label.collision | AgChartLabelCollisionOptions |  | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. |
| label.collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| label.collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| label.maxWidth | PixelSize |  | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.maxHeight | PixelSize |  | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. |
| label.truncate | boolean |  | Whether to truncate the label with an ellipsis when it does not fit within its bounds. |
| tooltip | AgSeriesTooltip |  | Series-specific tooltip configuration. |
| tooltip.enabled | boolean |  | Whether to show tooltips when the series are hovered over. |
| tooltip.showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. |
| tooltip.position | AgTooltipPositionOptions |  | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. |
| tooltip.position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| tooltip.position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| tooltip.position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| tooltip.position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| tooltip.interaction | AgSeriesTooltipInteraction |  | Configuration for tooltip interaction. |
| tooltip.interaction.enabled (required) | boolean |  | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text |
| tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| itemStyler | Styler |  | A callback function for adjusting the styles of a particular Map line based on the input parameters. |
| colorScale | AgColorScale |  | Configuration for colour scale with fills, domain, and mode. |
| colorScale.fills | AgColorScaleColorStop[] |  | Configuration for two or more colours, and the values they are rendered at. |
| colorScale.fills.color (required) | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | Colour at this position. |
| colorScale.fills.stop | number \| bigint |  | Position of this colour in the data domain. In continuous mode, the colour appears exactly at this value. In discrete mode, this is the first value of the next bin. |
| colorScale.fills.name | string |  | Display name for this bin, used in legend and tooltip labels. |
| colorScale.domain | [AgNumericValue, AgNumericValue] |  | Fixed domain for the colour scale. If unset, the domain is derived from the data extent. |
| colorScale.mode | 'continuous' \| 'discrete' | continuous | Whether the fills should be rendered as a continuous gradient or discrete bins. |
| colorScale.missingDataFill | CssColor |  | Fill colour for datums with no `colorKey` value. If unset, each series preserves its default behaviour for missing data. |
| highlight | AgMultiSeriesHighlightOptions |  | Configuration for highlighting when a series or legend item is hovered over. |
| highlight.highlightedSeries | AgMapLineHighlightStyleOptions |  | Options for the highlighted series. |
| highlight.highlightedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedSeries | AgMapLineHighlightStyleOptions |  | Options for the un-highlighted series when there is an active highlight. |
| highlight.unhighlightedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.bringToFront | boolean | true | Show this series in front when highlighted. |
| highlight.enabled | boolean |  | Set to `false` to disable highlighting. |
| highlight.highlightedItem | AgMapLineHighlightStyleOptions |  | Options for the highlighted item. |
| highlight.highlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedItem | AgMapLineHighlightStyleOptions |  | Options for the un-highlighted items when there is an active highlight. |
| highlight.unhighlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |

#### Map Line Background

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'map-line-background' |  | Configuration for the Map Shape Background. |
| topology | GeoJSON |  | GeoJSON data. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke of the line. A colour string, or a theme-colour reference object. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |