see https import * as am4core from "@amcharts/amcharts4/core" ; import * as am4maps from "@amcharts/amcharts4/maps" ; import am4themes_animated from "@amcharts/amcharts4/themes/animated" ; import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow" ; import am4geodata_usaLow from "@amcharts/amcharts4-geodata/usaLow" ; am4core . useTheme ( am4themes_animated ) ; let chart = am4core . create ( "chartdiv" , am4maps . MapChart ) ; try { chart . geodata = am4geodata_worldLow ; } catch ( e ) { chart . raiseCriticalError ( new Error ( "Map geodata could not be loaded. Please download the latest <a href=\"https://www.amcharts.com/download/download-v4/\">amcharts geodata</a> and extract its contents into the same directory as your amCharts files." ) ) ; } chart . projection = new am4maps . projections . Miller ( ) ; let worldSeries = chart . series . push ( new am4maps . MapPolygonSeries ( ) ) ; worldSeries . exclude = [ "AQ" ] ; worldSeries . useGeodata = true ; let polygonTemplate = worldSeries . mapPolygons . template ; polygonTemplate . tooltipText = "{name}" ; polygonTemplate . fill = chart . colors . getIndex ( 0 ) ; polygonTemplate . nonScalingStroke = true ; let hs = polygonTemplate . states . create ( "hover" ) ; hs . properties . fill = am4core . color ( "#367B25" ) ; let usaSeries = chart . series . push ( new am4maps . MapPolygonSeries ( ) ) ; try { usaSeries . geodata = am4geodata_usaLow ; } catch ( e ) { chart . raiseCriticalError ( new Error ( "Map geodata could not be loaded. Please download the latest <a href=\"https://www.amcharts.com/download/download-v4/\">amcharts geodata</a> and extract its contents into the same directory as your amCharts files." ) ) ; } let usPolygonTemplate = usaSeries . mapPolygons . template ; usPolygonTemplate . tooltipText = "{name}" ; usPolygonTemplate . fill = chart . colors . getIndex ( 1 ) ; usPolygonTemplate . nonScalingStroke = true ; let hs2 = usPolygonTemplate . states . create ( "hover" ) ; hs2 . properties . fill = am4core . color ( "#367B25" ) ;