Example of Annotations in React Diagram Component


This sample illustrates the competitive environment of a business through five forces chart. The elements of the five force chart is described using nodes and annotations. Customizing the position and appearance of the annotation is illustrated in this example.

More Details...


This example shows how to add textual descriptions to shapes and how to position them over the shapes. The annotations property of the node can be used to add descriptions.

The offset, horizontalAlignment, and verticalAlignment {" "} properties of the annotation can be used to customize the position of the descriptions. The bold,italic,{" "} fontSize, and fontFamily properties can be used to customize the appearance of the descriptions.

To change the position of the descriptions, select a node and choose the template in the property panel.