How to Add Multiple Annotations in React Diagram Hierarchical Layout?

This article explains how to add multiple annotations in React Diagram hierarchical layout. The React 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® React 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 node model. Each annotation can display different pieces of information (e.g., Name, content), 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, data) => {
 nodeModel.shape = {
   type: "Text",
 };
 // Add two annotations to the node
 (nodeModel.annotations = [
   {
     // First annotation: Display the 'Name' field
     content: (data).Name,
   },
   {
     // Second annotation: Display the 'content2' field
     content: (data).content2,
     // Position the second annotation within the node using offset
     offset: { x: 0.5, y: 0.8 },
   },
 ]);
}

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.

Refer to the working sample for additional details and implementation: StackBlitz

Conclusion

We hope you enjoyed learning how to add multiple annotations in the React Diagram hierarchical layout.

You can refer to our React 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 React 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, BoldDesk Support, or feedback portal. We are always happy to assist you!