Vue ChartsMaps - 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 Copy Link

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

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 for more details.
• The map-shape-background series has its topology defined on the series level.
• The map-shape-background series is rendered behind the map-line series due to their order in the series array.

Colour Scale Copy Link

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

{
    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.

Proportional Line Width Copy Link

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

{
    series: [
        {
            type: 'map-line',
            idKey: 'name',
            sizeKey: 'dailyVehicles',
            sizeName: 'Daily Vehicles',
            strokeWidth: 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.
• strokeWidth is used for the smallest value in the size scale.
• maxStrokeWidth is used for the largest value in the size scale.

Background Lines Copy Link

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.

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

API Reference Copy Link