How to Use Custom JSON Data for Dynamic Region-Based Popups in AMCharts

• Business analytics dashboards showing regional performance
• Product availability maps
• Geo insights for logistics or operations
• Interactive reports for public or internal users

These pop-ups are based heavily on AMCharts’ custom data mapping to connect geographic regions with meaningful information.

Required libraries

Make sure the following AMCharts files are included in your project:

• AMCharts 5 core
• AMCharts 5 maps package
• Relevant geodata files (world, country, or a custom map)

Example using script tags:

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>

Starter setup

Create a chart root

Create the root element that connects AMCharts to your HTML container.

<div id="chartdiv" style="width: 100%; height: 700px;"></div>
var root = am5.Root.new("chartdiv");

Initialize the map chart

Create the map chart and set basic properties like projection and panning.

var chart = root.container.children.push(
  am5map.MapChart.new(root, {
    panX: "rotateX",
    panY: "rotateY",
    projection: am5map.geoMercator()
  })
);

Load the desired geodata

Add a polygon series and load the geodata file.

var polygonSeries = chart.series.push(
  am5map.MapPolygonSeries.new(root, {
    geoJSON: am5geodata_worldLow
  })
);

This example is for a world map, but you can replace it with country-specific or custom geodata.AMCharts works with region IDs. These IDs are what you will later match with your JSON data to drive interaction.

This example is for world map, but you can replace it with country-specific or custom geodata.

AMCharts works with region IDs. These IDs are what you will later match with your JSON data to drive interaction.

{
  "US": {
    "title": "United States",
    "value": 120,
    "description": "High user activity"
  },
  "CA": {
    "title": "Canada",
    "value": 80,
    "description": "Moderate engagement"
  }
}

Best practices

• Use region IDs that match the map’s internal IDs
• Keep naming consistent and predictable
• Store all popup-related content inside each region object

Clear structure makes future updates easier and avoids debugging headaches.

• Load the JSON file locally or from an API
• Parse the response
• Match JSON keys to map region IDs
• Attach the data to each map polygon

This mapping logic is the backbone of region-based interactivity in AMCharts. If the IDs don’t match, the popups won’t work.

You can:

• Show popups on hover or click
• Dynamically update content per region
• Style popup layout, fonts, and spacing
• Control positioning and animation behavior

This level of geo map popup customization makes your maps feel polished and intentional.

• Add subtle animations when popups appear
• Apply conditional colors based on JSON values
• Display charts, icons, or images inside popups
• Highlight regions dynamically based on thresholds

These features work especially well for analytics-heavy dashboards.

Region ID mismatch

Ensure JSON keys exactly match map region IDs.

JSON not loading

Check file paths, API responses, and CORS settings.

Popup not appearing

Confirm event listeners are attached correctly.

Formatting issues

Inspect HTML and CSS used inside pop-up content.

Most problems stem from small mismatches or missing bindings.