Tree

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

const tree = root.container.children.push(
  am5hierarchy.Tree.new(root, {
    orientation: "vertical",
    inversed: false
  })
);

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

tree.data.setAll([{
  name: "Root",
  value: 0,
  children: [
    {
      name: "Branch 1",
      value: 5,
      children: [
        { name: "Leaf 1.1", value: 2 },
        { name: "Leaf 1.2", value: 3 }
      ]
    },
    {
      name: "Branch 2",
      value: 8,
      children: [
        { name: "Leaf 2.1", value: 4 },
        { name: "Leaf 2.2", value: 4 }
      ]
    }
  ]
}]);

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

tree.circles.template.setAll({
  radius: 20,
  strokeWidth: 2
});

tree.outerCircles.template.setAll({
  strokeWidth: 3,
  strokeOpacity: 0.5
});

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

tree.links.template.setAll({
  strokeWidth: 2,
  strokeOpacity: 0.5
});

selectDataItem(dataItem: DataItem<ITreeDataItem>): void

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

linkDataItems(
  source: DataItem<ITreeDataItem>,
  target: DataItem<ITreeDataItem>,
  strength?: number
): HierarchyLink

unlinkDataItems(
  source: DataItem<ITreeDataItem>,
  target: DataItem<ITreeDataItem>
): void

areLinked(
  source: DataItem<ITreeDataItem>,
  target: DataItem<ITreeDataItem>
): boolean

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

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

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

hoverDataItem(dataItem: DataItem<ITreeDataItem>): void

unhoverDataItem(dataItem: DataItem<ITreeDataItem>): void

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