(async () => { const topology = await fetch( 'https://code.highcharts.com/mapdata/custom/world.topo.json' ).then(response => response.json()); const data = [ ['Atlanta', 'USA', '1996', 33.75, -84.38, 7, 2, 2, 3], ['Sydney', 'Australia', '2000', -33.87, 151.20, 10, 4, 3, 3], ['Athens', 'Greece', '2004', 38, 23.72, 6, 5, 0, 1], ['Beijing', 'China', '2008', 39.92, 116.38, 9, 3, 5, 1], ['London', 'Great Britain', '2012', 51.5, -0.12, 4, 2, 1, 1], ['Rio de Janeiro', 'Brazil', '2016', -22.91, -43.20, 4, 0, 0, 4], ['Tokyo', 'Japan', '2020', 35.69, 139.69, 8, 4, 2, 2] ]; Highcharts.mapChart('container', { chart: { map: topology }, legend: { enabled: false }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, mapView: { fitToGeometry: { type: 'MultiPoint', coordinates: [ // Alaska west [-164, 54], // Greenland north [-35, 84], // New Zealand east [179, -38], // Chile south [-68, -55] ] } }, title: { text: 'Norwegian medals in the Summer Olympics (1996 - 2020)', align: 'left' }, subtitle: { text: 'Source: <a href="https://en.wikipedia.org/wiki/Norway_at_the_Olympics">Wikipedia</a>', align: 'left' }, tooltip: { headerFormat: '', pointFormat: '{point.city} ({point.country}, {point.year})<br/>' + 'Total medals: {point.z}<br/>' + '<span style="color: #ffd700;">\u25CF</span> {point.gold}<br/>' + '<span style="color: #c0c0c0;">\u25CF</span> {point.silver}<br/>' + '<span style="color: #cd7f32;">\u25CF</span> {point.bronze}<br/>' }, series: [{ name: 'World map', nullColor: '#fad3cf' }, { name: 'Olympic games', type: 'mapbubble', color: '#fe5f55', lineWidth: 1, keys: ['city', 'country', 'year', 'lat', 'lon', 'z', 'gold', 'silver', 'bronze'], data: data, minSize: '5%', maxSize: '12.5%', accessibility: { point: { valueDescriptionFormat: '{point.city}, {point.country}, {point.year}. Total medals: {point.z}. Gold: {point.gold}, silver: {point.silver}, bronze: {point.bronze}.' } } }] }); })();
Install with NPM
The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages.
npm install highcharts --save
See more installation optionsDownload our library
The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.
DownloadBuy a license
You can download and try out all Highcharts products for free. Once your project/product is ready for launch, purchase a commercial license.
See License Pricing