# Annotations (Maps example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/maps/annotations/ · Index for agents: https://westcoast-charts.com/llms.txt 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. - Chart type: `map` (Map) - Collection: Maps · Maps - Raw configuration: https://westcoast-charts.com/gallery-src/maps/annotations.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/premium/maps/annotations.html ## Setup ```js 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 ``` ## Options ```js 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() ``` ## Verify - Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page. - Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export maps-annotations.json --out maps-annotations.svg --with-table` (save the options above as JSON first)