Treemap

import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";

const treemap = root.container.children.push(
  am5hierarchy.Treemap.new(root, {
    layoutAlgorithm: "squarify",
    nodePaddingInner: 2
  })
);

treemap.set("nodePaddingInner", 2);

treemap.set("layoutAlgorithm", "binary");

interface ITreemapDataObject {
  name?: string;
  value?: number;
  children?: ITreemapDataObject[];
}

treemap.data.setAll([{
  name: "Root",
  children: [
    {
      name: "Category A",
      children: [
        { name: "Item A1", value: 100 },
        { name: "Item A2", value: 60 }
      ]
    },
    {
      name: "Category B",
      children: [
        { name: "Item B1", value: 135 },
        { name: "Item B2", value: 98 }
      ]
    }
  ]
}]);

treemap.nodes.template.setAll({
  toggleKey: "disabled"
});

treemap.rectangles.template.setAll({
  strokeWidth: 2,
  stroke: am5.color(0xffffff),
  cornerRadiusTL: 4,
  cornerRadiusTR: 4,
  cornerRadiusBL: 4,
  cornerRadiusBR: 4
});

treemap.labels.template.setAll({
  text: "{category}\n{valuePercentTotal.formatNumber('0.0')}%",
  fontSize: 12,
  oversizedBehavior: "truncate",
  textAlign: "center"
});

selectDataItem(dataItem: DataItem<ITreemapDataItem>): void

getDataItemById(id: string): DataItem<ITreemapDataItem> | undefined

enableDataItem(
  dataItem: DataItem<ITreemapDataItem>,
  maxDepth?: number,
  depth?: number,
  duration?: number
): void

disableDataItem(
  dataItem: DataItem<ITreemapDataItem>,
  duration?: number
): void

addChildData(
  dataItem: DataItem<ITreemapDataItem>,
  data: Array<any>
): void

hoverDataItem(dataItem: DataItem<ITreemapDataItem>): void

unhoverDataItem(dataItem: DataItem<ITreemapDataItem>): void

treemap.events.on("dataitemselected", (ev) => {
  console.log("Selected:", ev.dataItem);
});