Amcharts 4 heat legend - how to position below the map

Question

The heat legend shown in this codepen is placed (overlaid) on top of the map. I would like to have it positioned below the map, in a legend or footer area, but cannot find any options to do. The relevant code we have tried so far is:

var heatLegend = chart.chartContainer.createChild(am4maps.HeatLegend);
heatLegend.valign = "bottom";

But this simply obscures the bottom third of the map.

Answer 1

You can use external container.
Add another legend div to your html.

<div id="chartdiv"></div>
<div id="legenddiv"></div>

Then change your js code

let legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
// add heat legend
var heatLegend = legendContainer.createChild(am4maps.HeatLegend);

For more information check this out: https://www.amcharts.com/docs/v4/tutorials/chart-legend-in-an-external-container/