Risk Heatmap with custom shaped columns
This demo shows how we can apply custom shape (using SVG path) to XYChart columns.
Open in:New tab
/** * --------------------------------------- * 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 beginam4core.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 = 3000;
// Set up column appearancevar column = series.columns.template;column.strokeOpacity = 0;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.fillOpacity = 0;
// Set up bullet appearancevar bullet1 = series.bullets.push(new am4core.Sprite());bullet1.propertyFields.fill = "color";bullet1.path = "M0 86L50 0L150 0L200 86L150 173L50 173Z";bullet1.verticalCenter = "middle";bullet1.horizontalCenter = "middle";bullet1.strokeOpacity = 0;
bullet1.adapter.add("scale", function (scale, target) { if (target.dataItem) { let column = target.dataItem.column;
if (column) { let minSide = Math.min(column.measuredWidth, column.measuredHeight); let size = 200;
scale = minSide / size; } }
return scale;});
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;
// define colorsvar colors = { critical: "#ca0101", bad: "#e17a2d", medium: "#e1d92d", good: "#5dbe24", verygood: "#0b7d03"};
chart.data = [ { y: "Critical", x: "Very good", color: colors.medium, value: 20 }, { y: "Bad", x: "Very good", color: colors.good, value: 15 }, { y: "Medium", x: "Very good", color: colors.verygood, value: 25 }, { y: "Good", x: "Very good", color: colors.verygood, value: 15 }, { y: "Very good", x: "Very good", color: colors.verygood, value: 12 },
{ y: "Critical", x: "Good", color: colors.bad, value: 30 }, { y: "Bad", x: "Good", color: colors.medium, value: 24 }, { y: "Medium", x: "Good", color: colors.good, value: 25 }, { y: "Good", x: "Good", color: colors.verygood, value: 15 }, { y: "Very good", x: "Good", color: colors.verygood, value: 25 },
{ y: "Critical", x: "Medium", color: colors.bad, value: 33 }, { y: "Bad", x: "Medium", color: colors.bad, value: 14 }, { y: "Medium", x: "Medium", color: colors.medium, value: 20 }, { y: "Good", x: "Medium", color: colors.good, value: 19 }, { y: "Very good", x: "Medium", color: colors.good, value: 25 },
{ y: "Critical", x: "Bad", color: colors.critical, value: 31 }, { y: "Bad", x: "Bad", color: colors.critical, value: 24 }, { y: "Medium", x: "Bad", color: colors.bad, value: 25 }, { y: "Good", x: "Bad", color: colors.medium, value: 15 }, { y: "Very good", x: "Bad", color: colors.good, value: 15 },
{ y: "Critical", x: "Critical", color: colors.critical, value: 12 }, { y: "Bad", x: "Critical", color: colors.critical, value: 14 }, { y: "Medium", x: "Critical", color: colors.critical, value: 15 }, { y: "Good", x: "Critical", color: colors.bad, value: 25 }, { y: "Very good", x: "Critical", color: colors.medium, value: 19 }];<div id="chartdiv"></div>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;}risk-heatmap-with-custom-shaped-columns