Maps#api#map
This demo shows how we can programatically trigger display of the rollover tooltip on a MapChart by setting respective polygon’s isHover property.
MapChart
isHover
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */ // Create map instancevar chart = am4core.create("chartdiv", am4maps.MapChart); // Set map definitionchart.geodata = am4geodata_worldLow; // Set projectionchart.projection = new am4maps.projections.Miller(); // Create map polygon seriesvar polygonSeries = chart.series.push(new am4maps.MapPolygonSeries()); // Exclude AntarticapolygonSeries.exclude = ["AQ"]; // Make map load polygon (like country names) data from GeoJSONpolygonSeries.useGeodata = true; // Configure seriesvar polygonTemplate = polygonSeries.mapPolygons.template;polygonTemplate.tooltipText = "{name}";polygonTemplate.fill = am4core.color("#74B266"); // Create hover state and set alternative fill colorvar hs = polygonTemplate.states.create("hover");hs.properties.fill = am4core.color("#367B25"); polygonSeries.calculateVisualCenter = true;polygonTemplate.tooltipPosition = "fixed"; function triggerTooltip() { var us = polygonSeries.getPolygonById("US"); us.isHover = true;}
<div id="chartdiv"></div><input type="button" value="Trigger tooltip on USA" onclick="triggerTooltip()" />
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}#chartdiv { width: 100%; height: 400px;}
triggering-map-polygon-tooltip-via-api-3
