Grouped Countries Map
Sometimes you need to group countries on a map based on some criteria. In the most simple case you can just set the same fill color for countries in a group. But in this demo we go a step further and make all countries in a group react to pointer events jointly and also create a legend that switches the whole group off and back on.
Key implementation details
We create a separate MapPolygonSeries for each country group on the map. For each pointerover and pointerout event on an individual country, we switch the state on all countries in the group. Finally, we add our map polygon series as data items of the Legend.
Related tutorials
Build this chart with AI
The prompt below can be used to build this chart with AI. For best coding results, use the most advanced AI models, like Claude Opus 4.6 and GPT-5.3-Codex. For more info and tips, check out amCharts AI docs.
Create an interactive European map displaying countries grouped by EU membership timeline in four categories: 'EU member before 2004' (15 founding/early members), 'Joined at 2004' (10 countries), 'Joined at 2007' (Romania, Bulgaria), and 'Joined at 2013' (Croatia). Use a distinct auto-generated color and thin borders for each group. Non-EU countries should appear in gray. Implement coordinated hover effects where hovering over one country highlights its entire group. Show tooltips with the country name in bold and the year joined. Add a bottom-centered legend with colored markers for each group where clicking legend items toggles group visibility. Center the map on Europe at an appropriate zoom level. Use amCharts 5 library.
Demo source