Pack

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

const pack = root.container.children.push(
  am5hierarchy.Pack.new(root, {
    nodePadding: 5
  })
);

pack.set("nodePadding", 5);

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

pack.data.setAll([{
  name: "Root",
  children: [
    {
      name: "Group A",
      children: [
        { name: "A1", value: 100 },
        { name: "A2", value: 60 },
        { name: "A3", value: 40 }
      ]
    },
    {
      name: "Group B",
      children: [
        { name: "B1", value: 135 },
        { name: "B2", value: 98 }
      ]
    }
  ]
}]);

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

pack.circles.template.setAll({
  strokeWidth: 2,
  stroke: am5.color(0xffffff),
  fillOpacity: 0.7
});

pack.labels.template.setAll({
  text: "{category}",
  fontSize: 12,
  centerX: am5.p50,
  centerY: am5.p50,
  oversizedBehavior: "hide"
});

selectDataItem(dataItem: DataItem<IPackDataItem>): void

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

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

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

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

hoverDataItem(dataItem: DataItem<IPackDataItem>): void

unhoverDataItem(dataItem: DataItem<IPackDataItem>): void

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