Highcharts Map Collection

Website | API | Demo | Issues

License

The use of the maps in this collection requires that you follow our terms and conditions that are stated in License.md.

Installation

Install from npm

The Map Collection is available on npm as @highcharts/map-collection and can be installed as following:

npm i @highcharts/map-collection

1. Load a map in Node.js and use it in Highcharts Maps. Apply it in chart.map to make it the default map for all series.

const Highcharts = require('highcharts/highmaps.js'),
    map = require('@highcharts/map-collection/custom/world.topo.json');

Highcharts.mapChart('container', {
    chart: {
        map
    },
    // ...
});

Alternatively, you can apply different maps for different series (view demo):

series: [{
    mapData: map,
    // ...

2. Join your data with the map. By default Highcharts Maps is set up to map your data against the hc-key property of the Map Collection, allowing you to define your data like this:

data: [['us-ny', 0], ['us-mi', 5], ['us-tx', 3], ['us-ak', 5]]

For other data joining options, see the series.joinBy and series.keys options.

Download the source code

The source code for the Map Collection is available on GitHub. Each release is tagged with the version number and linked assets: https://github.com/highcharts/map-collection-dist/releases

Install from our CDN

By using the Highcharts CDN, you agree to abide by this fair usage policy and the associated licensing terms.

In the Map Collection reference, each map name is followed by links to demos and data. Click the TopoJSON link and copy the URL.

Load the map and parse the JSON:

const map = await fetch(
    'https://code.highcharts.com/mapdata/custom/world.topo.json'
).then(response => response.json());

Highcharts.mapChart('container', {
    chart: {
        map
    },
    // ...
});

Specific map versions are available via versioned URLs. For example: https://code.highcharts.com/mapdata/2.3/custom/world.topo.json corresponds to version ^2.3.