Heat map with Legend

Heat map (also known as Heatmap, Heat table, Shading matrix) represents data in a rectangular matrix where individual values are differentiated by color. <h2>Heat rules</h2> Heat rules allow modifying element's properties based on its related value in data, like for instance, color of the columns on this charts. [amb href="https://www.amcharts.com/docs/v4/concepts/series/#Heat_maps"]More about head rules[/amb] <h2>Heat legend</h2> A perfect companion for any color-based heat maps, a head legend can show the spectrum of values and their relation to colors. Furthermore, utilizing chart events, it's possible to further enhance UX by showing exact position of hovered element in the whole spectrum. [amb href="https://www.amcharts.com/docs/v4/concepts/legend/heat-legend/"]More about head legend[/amb]

by alcosbarco

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="div_amchart_des"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#div_amchart_des {
  width: 100%;
  height: 500px;
}

JavaScript

// Themes begin
//am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("div_amchart_des", am4charts.XYChart);
chart.maskBullets = false;

var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());

xAxis.dataFields.category = "Año";
yAxis.dataFields.category = "Mes";

xAxis.renderer.grid.template.disabled = true;
xAxis.renderer.minGridDistance = 40;

yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.inversed = true;
yAxis.renderer.minGridDistance = 30;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "Año";
series.dataFields.categoryY = "Mes";
series.dataFields.value = "Valor";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 3000;

var bgColor = new am4core.InterfaceColorSet().getFor("background");

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 1;
columnTemplate.strokeOpacity = 0.2;
columnTemplate.stroke = bgColor;
columnTemplate.tooltipText = "{Año}, {Mes}: {value.workingValue.formatNumber('#.')}";
columnTemplate.width = am4core.percent(98);
columnTemplate.height = am4core.percent(100);


// Set up bullet appearance
var bullet1 = series.bullets.push(new am4charts.CircleBullet());
bullet1.circle.propertyFields.radius = "value";
bullet1.circle.fill = am4core.color("#000");
bullet1.circle.strokeWidth = 0;
bullet1.circle.fillOpacity = 0.7;
bullet1.interactionsEnabled = false;


var bullet2 = series.bullets.push(new am4charts.LabelBullet());
bullet2.label.text = "{value}";
bullet2.label.fill = am4core.color("#fff");
bullet2.zIndex = 1;
bullet2.fontSize = 11;
bullet2.interactionsEnabled = false;

series.heatRules.push({
  target: columnTemplate,
  property: "fill",
  min: am4core.color("#45F82C"),
  max: am4core.color("#F82C3B")
  //min: am4core.color(bgColor),
  //max: chart.colors.getIndex(1)
});

// heat legend
var heatLegend =...