Annotations
Callouts with leader lines, a region note with a dashed outline, and ocean labels; cards flip to stay inside the plot and keep their size while zooming.
Open the chart without page chrome ↗Drawing width at least 900 px. Scroll within the chart on smaller screens.
const options = {
"chart": {
"height": 480,
"toolbar": {
"show": false
},
"type": "map"
},
"series": [
{
"name": "Adoption %",
"data": [
{
"id": "DEU",
"region": "Europe",
"value": 71.6
},
{
"id": "FRA",
"region": "Europe",
"value": 37
},
{
"id": "GBR",
"region": "Europe",
"value": 72.4
},
{
"id": "ITA",
"region": "Europe",
"value": 84
},
{
"id": "ESP",
"region": "Europe",
"value": 34.9
},
{
"id": "NLD",
"region": "Europe",
"value": 61
},
{
"id": "BEL",
"region": "Europe",
"value": 34.9
},
{
"id": "CHE",
"region": "Europe",
"value": 41.1
},
{
"id": "AUT",
"region": "Europe",
"value": 63.6
},
{
"id": "POL",
"region": "Europe",
"value": 78
},
{
"id": "SWE",
"region": "Europe",
"value": 34.9
},
{
"id": "NOR",
"region": "Europe",
"value": 33.6
},
{
"id": "DNK",
"region": "Europe",
"value": 72.5
},
{
"id": "FIN",
"region": "Europe",
"value": 67.5
},
{
"id": "IRL",
"region": "Europe",
"value": 69
},
{
"id": "PRT",
"region": "Europe",
"value": 71.3
},
{
"id": "CZE",
"region": "Europe",
"value": 72.6
},
{
"id": "HUN",
"region": "Europe",
"value": 35.6
},
{
"id": "ROU",
"region": "Europe",
"value": 72.7
},
{
"id": "GRC",
"region": "Europe",
"value": 71.8
},
{
"id": "SVK",
"region": "Europe",
"value": 79.8
},
{
"id": "BGR",
"region": "Europe",
"value": 44.3
},
{
"id": "HRV",
"region": "Europe",
"value": 38.8
},
{
"id": "SRB",
"region": "Europe",
"value": 81.4
},
{
"id": "SVN",
"region": "Europe",
"value": 84.9
},
{
"id": "LTU",
"region": "Europe",
"value": 52.6
},
{
"id": "LVA",
"region": "Europe",
"value": 77.2
},
{
"id": "EST",
"region": "Europe",
"value": 37.3
},
{
"id": "UKR",
"region": "Europe",
"value": 59.8
},
{
"id": "BLR",
"region": "Europe",
"value": 46.7
},
{
"id": "ISL",
"region": "Europe",
"value": 53.8
},
{
"id": "USA",
"region": "North America",
"value": 46.8
},
{
"id": "CAN",
"region": "North America",
"value": 84.4
},
{
"id": "MEX",
"region": "North America",
"value": 97.6
},
{
"id": "GTM",
"region": "North America",
"value": 77.5
},
{
"id": "CRI",
"region": "North America",
"value": 90.7
},
{
"id": "PAN",
"region": "North America",
"value": 75
},
{
"id": "CUB",
"region": "North America",
"value": 67.8
},
{
"id": "DOM",
"region": "North America",
"value": 84.5
},
{
"id": "BRA",
"region": "South America",
"value": 35.9
},
{
"id": "ARG",
"region": "South America",
"value": 39.1
},
{
"id": "CHL",
"region": "South America",
"value": 17.4
},
{
"id": "COL",
"region": "South America",
"value": 31.2
},
{
"id": "PER",
"region": "South America",
"value": 28.8
},
{
"id": "URY",
"region": "South America",
"value": 32.6
},
{
"id": "ECU",
"region": "South America",
"value": 39.3
},
{
"id": "VEN",
"region": "South America",
"value": 29.6
},
{
"id": "BOL",
"region": "South America",
"value": 28.9
},
{
"id": "PRY",
"region": "South America",
"value": 32.2
},
{
"id": "JPN",
"region": "Asia",
"value": 32.2
},
{
"id": "KOR",
"region": "Asia",
"value": 19.9
},
{
"id": "CHN",
"region": "Asia",
"value": 47.7
},
{
"id": "IND",
"region": "Asia",
"value": 19.4
},
{
"id": "IDN",
"region": "Asia",
"value": 45.7
},
{
"id": "SGP",
"region": "Asia",
"value": 33.3
},
{
"id": "MYS",
"region": "Asia",
"value": 25.8
},
{
"id": "THA",
"region": "Asia",
"value": 43.1
},
{
"id": "VNM",
"region": "Asia",
"value": 20.3
},
{
"id": "PHL",
"region": "Asia",
"value": 36.8
},
{
"id": "ISR",
"region": "Asia",
"value": 43.7
},
{
"id": "ARE",
"region": "Asia",
"value": 44.2
},
{
"id": "SAU",
"region": "Asia",
"value": 41.6
},
{
"id": "TUR",
"region": "Asia",
"value": 36.7
},
{
"id": "KAZ",
"region": "Asia",
"value": 47
},
{
"id": "PAK",
"region": "Asia",
"value": 47.7
},
{
"id": "BGD",
"region": "Asia",
"value": 21.9
},
{
"id": "LKA",
"region": "Asia",
"value": 31.6
},
{
"id": "AUS",
"region": "Oceania",
"value": 65.5
},
{
"id": "NZL",
"region": "Oceania",
"value": 59.2
},
{
"id": "ZAF",
"region": "Africa",
"value": 9.9
},
{
"id": "NGA",
"region": "Africa",
"value": 7.7
},
{
"id": "EGY",
"region": "Africa",
"value": 14.4
},
{
"id": "KEN",
"region": "Africa",
"value": 16.2
},
{
"id": "MAR",
"region": "Africa",
"value": 16.7
},
{
"id": "GHA",
"region": "Africa",
"value": 13.4
},
{
"id": "ETH",
"region": "Africa",
"value": 13.5
},
{
"id": "TZA",
"region": "Africa",
"value": 8.2
},
{
"id": "DZA",
"region": "Africa",
"value": 11.6
},
{
"id": "TUN",
"region": "Africa",
"value": 12.7
},
{
"id": "SEN",
"region": "Africa",
"value": 7
},
{
"id": "CIV",
"region": "Africa",
"value": 11
},
{
"id": "AGO",
"region": "Africa",
"value": 14.5
}
]
}
],
"plotOptions": {
"map": {
"map": "world-small-states",
"annotations": [
{
"at": [
13.4,
52.5
],
"label": "Launch market",
"text": "Berlin, Q1 2026",
"offset": [
-60,
-34
]
},
{
"region": "BRA",
"label": "Next: Brazil",
"text": "pilot from Q3",
"offset": [
40,
30
]
},
{
"at": {
"lon": 139.7,
"lat": 35.7
},
"label": "Tokyo office",
"offset": [
30,
-34
]
},
{
"type": "text",
"at": [
-38,
22
],
"text": "Atlantic Ocean"
},
{
"type": "text",
"at": [
-140,
2
],
"text": "Pacific Ocean"
},
{
"type": "text",
"at": [
78,
-22
],
"text": "Indian Ocean"
}
]
}
},
"theme": {
"mode": "light",
"preset": "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import premium from 'west-coast-charts/premium'
import 'west-coast-charts/maps/world-small-states' // registers the map shapes
WestCoastCharts.use(types).use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"height": 480,
"toolbar": {
"show": false
},
"type": "map"
},
"series": [
{
"name": "Adoption %",
"data": [
{
"id": "DEU",
"region": "Europe",
"value": 71.6
},
{
"id": "FRA",
"region": "Europe",
"value": 37
},
{
"id": "GBR",
"region": "Europe",
"value": 72.4
},
{
"id": "ITA",
"region": "Europe",
"value": 84
},
{
"id": "ESP",
"region": "Europe",
"value": 34.9
},
{
"id": "NLD",
"region": "Europe",
"value": 61
},
{
"id": "BEL",
"region": "Europe",
"value": 34.9
},
{
"id": "CHE",
"region": "Europe",
"value": 41.1
},
{
"id": "AUT",
"region": "Europe",
"value": 63.6
},
{
"id": "POL",
"region": "Europe",
"value": 78
},
{
"id": "SWE",
"region": "Europe",
"value": 34.9
},
{
"id": "NOR",
"region": "Europe",
"value": 33.6
},
{
"id": "DNK",
"region": "Europe",
"value": 72.5
},
{
"id": "FIN",
"region": "Europe",
"value": 67.5
},
{
"id": "IRL",
"region": "Europe",
"value": 69
},
{
"id": "PRT",
"region": "Europe",
"value": 71.3
},
{
"id": "CZE",
"region": "Europe",
"value": 72.6
},
{
"id": "HUN",
"region": "Europe",
"value": 35.6
},
{
"id": "ROU",
"region": "Europe",
"value": 72.7
},
{
"id": "GRC",
"region": "Europe",
"value": 71.8
},
{
"id": "SVK",
"region": "Europe",
"value": 79.8
},
{
"id": "BGR",
"region": "Europe",
"value": 44.3
},
{
"id": "HRV",
"region": "Europe",
"value": 38.8
},
{
"id": "SRB",
"region": "Europe",
"value": 81.4
},
{
"id": "SVN",
"region": "Europe",
"value": 84.9
},
{
"id": "LTU",
"region": "Europe",
"value": 52.6
},
{
"id": "LVA",
"region": "Europe",
"value": 77.2
},
{
"id": "EST",
"region": "Europe",
"value": 37.3
},
{
"id": "UKR",
"region": "Europe",
"value": 59.8
},
{
"id": "BLR",
"region": "Europe",
"value": 46.7
},
{
"id": "ISL",
"region": "Europe",
"value": 53.8
},
{
"id": "USA",
"region": "North America",
"value": 46.8
},
{
"id": "CAN",
"region": "North America",
"value": 84.4
},
{
"id": "MEX",
"region": "North America",
"value": 97.6
},
{
"id": "GTM",
"region": "North America",
"value": 77.5
},
{
"id": "CRI",
"region": "North America",
"value": 90.7
},
{
"id": "PAN",
"region": "North America",
"value": 75
},
{
"id": "CUB",
"region": "North America",
"value": 67.8
},
{
"id": "DOM",
"region": "North America",
"value": 84.5
},
{
"id": "BRA",
"region": "South America",
"value": 35.9
},
{
"id": "ARG",
"region": "South America",
"value": 39.1
},
{
"id": "CHL",
"region": "South America",
"value": 17.4
},
{
"id": "COL",
"region": "South America",
"value": 31.2
},
{
"id": "PER",
"region": "South America",
"value": 28.8
},
{
"id": "URY",
"region": "South America",
"value": 32.6
},
{
"id": "ECU",
"region": "South America",
"value": 39.3
},
{
"id": "VEN",
"region": "South America",
"value": 29.6
},
{
"id": "BOL",
"region": "South America",
"value": 28.9
},
{
"id": "PRY",
"region": "South America",
"value": 32.2
},
{
"id": "JPN",
"region": "Asia",
"value": 32.2
},
{
"id": "KOR",
"region": "Asia",
"value": 19.9
},
{
"id": "CHN",
"region": "Asia",
"value": 47.7
},
{
"id": "IND",
"region": "Asia",
"value": 19.4
},
{
"id": "IDN",
"region": "Asia",
"value": 45.7
},
{
"id": "SGP",
"region": "Asia",
"value": 33.3
},
{
"id": "MYS",
"region": "Asia",
"value": 25.8
},
{
"id": "THA",
"region": "Asia",
"value": 43.1
},
{
"id": "VNM",
"region": "Asia",
"value": 20.3
},
{
"id": "PHL",
"region": "Asia",
"value": 36.8
},
{
"id": "ISR",
"region": "Asia",
"value": 43.7
},
{
"id": "ARE",
"region": "Asia",
"value": 44.2
},
{
"id": "SAU",
"region": "Asia",
"value": 41.6
},
{
"id": "TUR",
"region": "Asia",
"value": 36.7
},
{
"id": "KAZ",
"region": "Asia",
"value": 47
},
{
"id": "PAK",
"region": "Asia",
"value": 47.7
},
{
"id": "BGD",
"region": "Asia",
"value": 21.9
},
{
"id": "LKA",
"region": "Asia",
"value": 31.6
},
{
"id": "AUS",
"region": "Oceania",
"value": 65.5
},
{
"id": "NZL",
"region": "Oceania",
"value": 59.2
},
{
"id": "ZAF",
"region": "Africa",
"value": 9.9
},
{
"id": "NGA",
"region": "Africa",
"value": 7.7
},
{
"id": "EGY",
"region": "Africa",
"value": 14.4
},
{
"id": "KEN",
"region": "Africa",
"value": 16.2
},
{
"id": "MAR",
"region": "Africa",
"value": 16.7
},
{
"id": "GHA",
"region": "Africa",
"value": 13.4
},
{
"id": "ETH",
"region": "Africa",
"value": 13.5
},
{
"id": "TZA",
"region": "Africa",
"value": 8.2
},
{
"id": "DZA",
"region": "Africa",
"value": 11.6
},
{
"id": "TUN",
"region": "Africa",
"value": 12.7
},
{
"id": "SEN",
"region": "Africa",
"value": 7
},
{
"id": "CIV",
"region": "Africa",
"value": 11
},
{
"id": "AGO",
"region": "Africa",
"value": 14.5
}
]
}
],
"plotOptions": {
"map": {
"map": "world-small-states",
"annotations": [
{
"at": [
13.4,
52.5
],
"label": "Launch market",
"text": "Berlin, Q1 2026",
"offset": [
-60,
-34
]
},
{
"region": "BRA",
"label": "Next: Brazil",
"text": "pilot from Q3",
"offset": [
40,
30
]
},
{
"at": {
"lon": 139.7,
"lat": 35.7
},
"label": "Tokyo office",
"offset": [
30,
-34
]
},
{
"type": "text",
"at": [
-38,
22
],
"text": "Atlantic Ocean"
},
{
"type": "text",
"at": [
-140,
2
],
"text": "Pacific Ocean"
},
{
"type": "text",
"at": [
78,
-22
],
"text": "Indian Ocean"
}
]
}
},
"theme": {
"mode": "light",
"preset": "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export maps-annotations.json --out maps-annotations.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/maps/annotations/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?