How to Add Annotations in Angular Diagram Hierarchical Layout?

The Angular Diagram allows you to customize nodes with multiple annotations. This is useful when you need to display more than one piece of information within each node in a hierarchical layout. You can achieve this by adding multiple annotations to a node and adjusting their position within the node using the offset property.

In this article, we’ll demonstrate how to add more than one annotation to a node in a Hierarchical Tree layout using the Syncfusion® Angular Diagram.

Consider the following dataset, which includes the properties Name, content2, and Category for each node:

export let hierarchicalTree: object[] = [
 { 'Name': 'Diagram', 'content2': 'Diagram 2', 'fillColor': '#916DAF' },
 { 'Name': 'Layout', 'content2': 'Layout 2', 'Category': 'Diagram' },
]; 

To add multiple annotations inside a node, we use the annotations property of the nodeModel. Each annotation can display different pieces of information (e.g., Name, content2), and we can control the positioning of each annotation using the offset property.

Here’s the solution to bind multiple annotations from the dataset:

doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
     (nodeModel.shape = { type: 'Basic' }),
       (nodeModel.annotations = [
         {
         // First annotation: Display the 'Name' field
           content: (data as EmployeeInfo).Name,
         },
         {
            // Second annotation: Display the 'content2' field
           content: (data as any).content2,
           // Position the second annotation within the node using offset
           offset: { x: 0.5, y: 0.7 },
         },
       ]);
   }, 

The nodeModel.annotations property allows you to define multiple annotations for each node. In this example, we are binding two annotations:

The first annotation displays the Name field (e.g., ‘Diagram’, ‘Layout’).

The second annotation displays the content2 field (e.g., ‘Diagram2’, ‘Layout 2’), and its position is adjusted using the offset property.

The offset property defines the position of the annotation within the node.

Sample:
You can try this code example in the following StackBlitz

Conclusion
I hope you enjoyed learning how to add annotations in Angular Diagram hierarchical layout.
You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!