Risk Heatmap

<h2>Two-dimensional category axes</h2> Both axes on this chart is a category axis. This allows placing columns precisely as squares. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#Category_axis"]More about category axes[/amb] <h2>Data-aware bullets</h2> Bullets inside squares are bullets. Labels inside bullets are bound to the actual values in data. [amb href="https://www.amcharts.com/docs/v4/concepts/bullets/"]More about bullets[/amb] <h2>Heat rules</h2> Heat rules allow modifying element's properties based on its related value in data. Those are not limited to colors. Any quantifiable value can be used in a heat rule, like for instance, a radius of a bullet on this chart. [amb href="https://www.amcharts.com/docs/v4/concepts/series/#Heat_maps"]More about head rules[/amb]

by notacouch

HTML

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

CSS

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: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * 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/
 * ---------------------------------------
 */

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

var chart = am4core.create( "chartdiv", am4charts.XYChart );
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.maskBullets = false;

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

xAxis.dataFields.category = "x";
yAxis.dataFields.category = "y";

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 = "x";
series.dataFields.categoryY = "y";
series.dataFields.value = "value";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 0;

// Set up column appearance
var column = series.columns.template;
column.strokeWidth = 2;
column.strokeOpacity = 1;
column.stroke = am4core.color( "#ffffff" );
column.tooltipText = "{x}, {y}: {value.workingValue.formatNumber('#.')}";
column.width = am4core.percent( 100 );
column.height = am4core.percent( 100 );
//column.column.cornerRadius(6, 6, 6, 6);
column.propertyFields.fill = "color";

/*
// 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 =...