Hierarchy API

This tutorial is a collection of uses for Hierarchy-specific API.

Dynamically adding child nodes

We can use a series method addChildData() to dynamically add child nodes to in any Hierarchy chart.

series.addChildData(dataItem, [
  { name: "Child 1", value: 1 },
  { name: "Child 2", value: 1 },
  { name: "Child 3", value: 1 }
]);

series.addChildData(dataItem, [
  { name: "Child 1", value: 1 },
  { name: "Child 2", value: 1 },
  { name: "Child 3", value: 1 }
]);

Here's a working example, which adds a child node to a clicked node.

See the Pen
Dynamically adding and removing nodes in a Force-Directed Tree by amCharts team (@amcharts)
on CodePen.0

Please note, that if node did not previously had any child nodes, and thus had a value of its own (not a sum of child values), we would want to remove it's own value before adding children:

dataItem.set("value", undefined);
dataItem.set("valueWorking", undefined);

dataItem.set("value", undefined);
dataItem.set("valueWorking", undefined);

Removing nodes

To remove a node without updating the whole data set, use series' method disposeDataItem():

series.disposeDataItem(dataItem);

series.disposeDataItem(dataItem);

The below demo will remove any clicked node:

See the Pen
Removing nodes from a Force-Directed Tree by amCharts team (@amcharts)
on CodePen.0