I have created a world chart map that takes in heat data and displays it. I have also created an export and annotation menu based on the AM Charts documentation
JS:
// Create root
var root = am5.Root.new("mainHeatMap");
// Set themes
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
var chart = root.container.children.push(
am5map.MapChart.new(root, {
layout: root.horizontalLayout,
projection: am5map.geoEqualEarth()
})
);
// Create polygon series
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
valueField: "value",
calculateAggregates: true,
exclude: ["AQ"],
})
);
// Set series world map to grey
polygonSeries.set("fill", am5.color("#999999"));
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{cname}, {value} trips - {description}"
});
polygonSeries.set("heatRules", [{
target: polygonSeries.mapPolygons.template,
dataField: "value",
min: am5.color("#67b7dc"),
max: am5.color("#00338d"),
key: "fill"
}]);
polygonSeries.mapPolygons.template.events.on("click", function (ev) {
HandleMapClick(ev.target)
});
polygonSeries.data.setAll(heatmapData);
polygonSeries.mapPolygons.template.adapters.add("tooltipText", (text, target) => {
const country = target.dataItem.dataContext.cname;
if (country && heatmapData.some(data => data.country === country.id)) {
return text;
}
return "";
});
var heatLegend = chart.children.push(
am5.HeatLegend.new(root, {
orientation: "horizontal",
startColor: am5.color("#67b7dc"),
endColor: am5.color("#00338d"),
startText: String(min),
endText: String(max),
stepCount: 10,
width: am5.percent(50),
y: am5.percent(100),
centerY: am5.percent(100)
})
);
heatLegend.startLabel.setAll({
fontSize: 12,
fill: heatLegend.get("startColor")
});
heatLegend.endLabel.setAll({
fontSize: 12,
fill: heatLegend.get("endColor")
});
polygonSeries.events.on("datavalidated", function () {
heatLegend.set("startValue", polygonSeries.getPrivate("valueLow"));
heatLegend.set("endValue", polygonSeries.getPrivate("valueHigh"));
});
// Set up export and annotation
var exporting = am5plugins_exporting.Exporting.new(root, {
menu: am5plugins_exporting.ExportingMenu.new(root, {})
});
var annotator = am5plugins_exporting.Annotator.new(root, {});
var menuitems = exporting.get("menu").get("items");
menuitems.push({
type: "separator"
});
menuitems.push({
type: "custom",
label: "Annotate",
callback: function () {
this.close();
annotator.toggle();
}
});
HTML:
<script src="//cdn.amcharts.com/lib/5/index.js"></script>
<script src="//cdn.amcharts.com/lib/5/map.js"></script>
<script src="//cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="//cdn.amcharts.com/lib/5/plugins/exporting.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
With this code I get this output where my export/annotation menu is constantly showing and the toggle does not work:
World heatmap with export/annotation menu
Is there something I am missing here, maybe with initialising the menu as a child of the root? All of the functionality of the menu works as intended such as downloading images and annotations. The toggle does not work and the menu is always showing, not sure of a way around this.
I tried using an onClick event to trigger something in the console, but that was not working either. Another workaround was hiding the toggle icon, but it does not look good and takes up alot of room on the chart