Search code examples
amchartsamcharts4

AmCharts4 Remove Continent(s) in a MapChart


I'm using @amcharts/amcharts4-geodata/worldLow" to create a simple map chart but don't need Antarctica. Would there be a way to hide or remove it but in such a way that the map utilizes the space left by Antarctica to make the map adjust accordingly and make the other continents more prominent?

Initialization code:

import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

let chart = am4core.create("globediv", am4maps.MapChart);

try {
    chart.geodata = am4geodata_worldLow;
} catch (e) {
  chart.raiseCriticalError(new Error("Map geodata could not be loaded."));
}

chart.projection = new am4maps.projections.Projection;
chart.panBehavior = "move";

let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.data = myData;
polygonSeries.useGeodata = true;

Would like to remove Antarctica from this view and have the rest of the map adjust accordingly


Solution

  • Use the exclude property in the polygonSeries as documented here

    polygonSeries.exclude = ["AQ"];
    

    let chart = am4core.create("chartdiv", am4maps.MapChart);
    
    try {
      chart.geodata = am4geodata_worldLow;
    } catch (e) {
      chart.raiseCriticalError(new Error("Map geodata could not be loaded."));
    }
    
    chart.projection = new am4maps.projections.Miller();
    chart.panBehavior = "move";
    
    let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.useGeodata = true;
    polygonSeries.exclude = ["AQ"];
    #chartdiv {
      width: 100%;
      height: 400px;
     }
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
    <div id="chartdiv"></div>