# Label Appearance in React Diagram

## Overview

The React Diagram component provides comprehensive styling options to customize label appearance. Labels can be enhanced with various font properties, colors, decorations, and visual effects to match application requirements.

Font styling properties such as [`fontSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#fontsize), [`fontFamily`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#fontfamily), [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#color) control the basic text appearance. Additional text formatting is available through the [`bold`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#bold), [`italic`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#italic), and [`textDecoration`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#textdecoration) properties to style the label’s text.

Background and border styling can be applied using the [`fill`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#fill), [`strokeColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#strokecolor), and [`strokeWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#strokewidth) properties to define the background color and border color of the annotation, and the [`opacity`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#opacity) property controls label transparency.

The [`visibility`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel#visibility) property enables or disables label display.

The following code demonstrates comprehensive label appearance customization:

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: 'node1',
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        // Sets the annotation for the node
        annotations: [{
            content: 'Annotation visibility true',
            style: {
              color: 'blue',
              bold: true,
              italic: true,
              fontSize: 15,
              fontFamily: 'TimesNewRoman',
              fill: 'orange',
              opacity: 0.6,
            },
            visibility: true,
          },
          {
            content: 'Annotation visibility false',
            offset: { x: 0.5, y: 1 },
            style: {
              color: 'blue',
              bold: true,
              italic: true,
              fontSize: 15,
              fontFamily: 'TimesNewRoman',
              fill: 'orange',
              opacity: 0.6,
            },
            visibility: false,
          }]
    }];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}


import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
  id: 'node1',
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the node
  annotations: [{
      content: 'Annotation visibility true',
      style: {
        color: 'blue',
        bold: true,
        italic: true,
        fontSize: 15,
        fontFamily: 'TimesNewRoman',
        fill: 'orange',
        opacity: 0.6,
      },
      visibility: true,
    },
    {
      content: 'Annotation visibility false',
      offset: { x: 0.5, y: 1 },
      style: {
        color: 'blue',
        bold: true,
        italic: true,
        fontSize: 15,
        fontFamily: 'TimesNewRoman',
        fill: 'orange',
        opacity: 0.6,
      },
      visibility: false,
    }]
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);




{% endhighlight %}
{% endtabs %}

 

## Horizontal and vertical alignment

Label positioning within nodes and connectors can be precisely controlled through horizontal and vertical alignment properties. The following table illustrates all possible alignment combinations with offset (0, 0):

| Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) |
| -------- | -------- | -------- |
| Left | Top | ![Left Top Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label1.png) |
| Center | Top | ![Center Top Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label2.png) |
| Right | Top |  ![Right Top Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label3.png) |
| Left | Center | ![Left Center Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label4.png) |
| Center | Center| ![Center Center Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label5.png) |
| Right | Center | ![Right Center Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label6.png) |
| Left | Bottom | ![Left Bottom Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label7.png) |
| Center | Bottom | ![Center Bottom Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label8.png) |
| Right |Bottom |![Right Bottom Label Alignment](https://ej2.syncfusion.com/react/documentation/diagram/images/label9.png) |

The following code example shows how to configure label alignment:

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        // Sets the annotation for the node
        annotations: [{
                content: 'Annotation',
                // Sets the horizontal alignment as left
                horizontalAlignment: 'Left',
                // Sets the vertical alignment as Center
                verticalAlignment: 'Center'
            }]
    }];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}


import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the node
    annotations: [{
        content: 'Annotation',
        // Sets the horizontal alignment as left
        horizontalAlignment: 'Left',
        // Sets the vertical alignment as Center
        verticalAlignment: 'Center'
    }]
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);




{% endhighlight %}
{% endtabs %}

 

## Annotation Margin

The [`Margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel#margin) property adds spacing around labels by specifying absolute values for any or all four sides. This property works in conjunction with offset, horizontal alignment, and vertical alignment to achieve precise label positioning.

The following example demonstrates label positioning using [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel) values.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: 'node1',
        // Position of the node
        offsetX: 100,
        offsetY: 100,
        // Size of the node
        width: 100,
        height: 100,
        // Sets the annotation for the connector
        annotations: [{
                content: 'Task1',
                // Sets the margin for the content
                margin: {
                    top: 10
                },
                horizontalAlignment: 'Center',
                verticalAlignment: 'Top',
                offset: {
                    x: 0.5,
                    y: 1
                }
            }]
}];
let connector = [
    {
      sourcePoint: { x: 200, y: 100 },
      targetPoint: { x: 500, y: 300 },
      type: 'Orthogonal',
      //Path annotation offset
      annotations: [
        {
          content: 'annotation',
          offset: 0.2,
          margin: { left: 40 },
        },
      ],
    },
  ];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}


import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
  id: 'node1',
  // Position of the node
  offsetX: 100,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the connector
  annotations: [{
          content: 'Task1',
          // Sets the margin for the content
          margin: {
              top: 10
          },
          horizontalAlignment: 'Center',
          verticalAlignment: 'Top',
          offset: {
              x: 0.5,
              y: 1
          }
      }]
}];
let connector: ConnectorModel[] = [
  {
    sourcePoint: { x: 200, y: 100 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'annotation',
        offset: 0.2,
        margin: { left: 40 },
      },
    ],
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      connectors={connector}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);



{% endhighlight %}
{% endtabs %}

 

## Hyperlink

Labels can include an interactive [`hyperlink`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel#hyperlink) for both nodes and connectors. The `hyperlink` object is configured inside the annotation entry of either a node's or a connector's `annotations` collection — the same properties apply in both cases. Hyperlink behavior and appearance can be customized with several properties.

The [`link`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel#link) property defines the URL the hyperlink navigates to, and the [`hyperlinkOpenState`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel#hyperlinkopenstate) property controls how the hyperlink opens. Valid values are `NewWindow` (opens in a new browser tab/window) and `SameTab` (opens in the same browser tab).

Hyperlink appearance is controlled through the [`content`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel#content) property for display text, [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel#color) for text color, and [`textDecoration`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel#textdecoration ) for styling effects like **Underline**, **LineThrough**, **Overline**.

The following example shows hyperlink implementation and customization:

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
            hyperlink: {
                link: 'https://google.com',
                //Set the link to open in the current tab
                hyperlinkOpenState: 'NewWindow'
            }
        }]
    }];
    let connector = [
        {
          sourcePoint: { x: 300, y: 200 },
          targetPoint: { x: 500, y: 300 },
          type: 'Orthogonal',
          //Path annotation offset
          annotations: [
            {
              hyperlink: {
                link: 'https://google.com',
                hyperlinkOpenState: 'NewWindow',
                content: 'Google',
                color: 'orange',
                textDecoration: 'Overline',
              },
            },
          ],
        },
      ];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}


import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel,
    ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        hyperlink: {
            link: 'https://google.com',
            //Set the link to open in the current tab
            hyperlinkOpenState:'NewWindow'
        }
    }]
}];
let connector: ConnectorModel[] = [
  {
    sourcePoint: { x: 300, y: 200 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        hyperlink: {
          link: 'https://google.com',
          hyperlinkOpenState: 'NewWindow',
          content: 'Google',
          color: 'orange',
          textDecoration: 'Overline',
        },
      },
    ],
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      connectors={connector}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);




{% endhighlight %}
{% endtabs %}

 

## Rotate Annotation

Labels can be rotated to any angle using the [`rotateAngle`](https://helpej2.syncfusion.com/react/documentation/api/diagram/shapeAnnotationModel#rotateangle) property, which is available on both node (Shape) and connector (Path) annotations. This feature is useful for creating dynamic label orientations that match specific design requirements.

The following example demonstrates label rotation:
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        // Sets the annotation for the node
        annotations: [{
                content: 'Annotation',
                // Sets the horizontal alignment as left
                rotateAngle: 45,
            }]
    }];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the node
    annotations: [{
        content: 'Annotation',
        // Sets the horizontal alignment as left
        rotateAngle: 45,
    }]
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% endtabs %}

 

## Template support for Annotation

Diagram provides template support for annotation. You can either define a string template and assign it to [`template`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel#template) property of annotation or define a annotation template in html file and assign it to the [`annotationTemplate`](https://helpej2.syncfusion.com/react/documentation/api/diagram#annotationtemplate) property of the diagram.

### String template

 For string template you should define a SVG/HTML content as string in the annotation's `template` property.

The following code illustrates how to define a template in annotation.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: 'node1',
        // Position of the node
        offsetX: 100,
        offsetY: 100,
        // Size of the node
        width: 100,
        height: 100,
        // Sets the annotation for the Node
        annotations: [{
                // Set an template for annotation
                template: '<div><input type="button" value="Submit"></div>'
            }]
    }];
let connector = [{
        sourcePoint: {
            x: 300,
            y: 100
        },
        targetPoint: {
            x: 400,
            y: 300
        },
        type: 'Orthogonal',
        style: {
            strokeColor: '#6BA5D7'
        },
        // Sets the Annotation for the Connector
        annotations: [{
                // Set an template for annotation
                height: 60, width: 100, 
                template: '<div><input type="button" value="Submit"></div>'
            }]
    }];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}



import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel,
    ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        // Set an template for annotation
        template: '<div><input type="button" value="Submit"></div>'
    }]
}];
let connector: ConnectorModel[] = [{
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    style: {
        strokeColor: '#6BA5D7'
    },
    // Sets the Annotation for the Connector
    annotations: [{
       // Set an template for annotation
       height: 60, width: 100,
       template: '<div><input type="button" value="Submit"></div>'
    }]
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      connectors={connector}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);



{% endhighlight %}
{% endtabs %}

 

N> Specify width and height for labels when using templates to ensure proper alignment and rendering.

### Annotation template

HTML-based templates provide more complex content structures by defining a template inside a `<script>` tag and assigning its ID to the `annotationTemplate` property of the diagram. This template system works with both nodes and connectors.

Define the template markup inside a `<script>` tag with a unique `id`, then bind that `id` to the diagram's `annotationTemplate` property. The following code demonstrates HTML template usage for labels:

{% tabs %}
{% highlight js tabtitle="index.jsx" %}

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
        id: 'node1',
        // Position of the node
        offsetX: 100,
        offsetY: 100,
        // Size of the node
        width: 100,
        height: 100,
        // Sets the annotation for the Node
        annotations: [{
                id: 'Node', width: 100, height: 50
            }]
    }];
let connector = [{
        id: 'connector1',
        sourcePoint: {
            x: 300,
            y: 100
        },
        targetPoint: {
            x: 400,
            y: 300
        },
        type: 'Orthogonal',
        // Sets the Annotation for the Connector
        annotations: [{
                // Set an template for annotation
                id: 'Connector', height: 50, width: 100, 
            }]
    }];
// initialize Diagram component
function App() {
    return (
    <div>
        <script id="annotationTemplate">
            <div style={{ width: "100px", height: "100%", overflow: "hidden" }}>
                <input  style={{ width: "100px"}} type = "button" value="${id}"/>
            </div>
        </script>
        <DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector} annotationTemplate='#annotationTemplate'/>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel,
    ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        id: 'Node', width: 100, height: 50
    }]
}];
let connector: ConnectorModel[] = [{
    id: 'connector1',
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
            // Set an template for annotation
            id: 'Connector', height: 50, width: 100, 
    }]
}];
// initialize Diagram component
function App() {
  return (
    <div>
        <script id="annotationTemplate">
            <div style={{ width: "100px", height: "100%", overflow: "hidden" }}>
                <input  style={{ width: "100px"}} type = "button" value="${id}"/>
            </div>
        </script>
        <DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector} annotationTemplate='#annotationTemplate'/>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);


{% endhighlight %}
{% endtabs %}

 

### Functional template

Define a function that returns a string template and assign that method to the `annotationTemplate` property of the diagram. Inside the function, customize the output based on the id of the annotation.

The following code illustrates how to define a functional template.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        id: 'Node', width: 100, height: 50
    }]
}];
let connector = [{
    id: 'connector1',
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
            // Set an template for annotation
            id: 'Connector', height: 50, width: 100, 
        }]
}];
function diagramTemplate(props) {
    return (<div style={{ width: "100px", height: "100%", overflow: "hidden" }}>
    <input  style={{ width: "100px"}} type = "button" value={props.id}/>
    </div>);
}
// initialize Diagram component
function App() {
    return (
        <DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector} annotationTemplate={diagramTemplate.bind(this)}/>
    );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);


{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel,
    ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        id: 'Node', width: 100, height: 50
    }]
}];
let connector: ConnectorModel[] = [{
    id: 'connector1',
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
            // Set an template for annotation
            id: 'Connector', height: 50, width: 100, 
    }]
}];
function diagramTemplate(props: any) {
    return (<div style={{ width: "100px", height: "100%", overflow: "hidden" }}>
    <input  style={{ width: "100px"}} type = "button" value={props.id}/>
    </div>);
}
// initialize Diagram component
function App() {
  return (
    <DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector} annotationTemplate={diagramTemplate.bind(this)}/>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% endtabs %}

 

## Text align

The [`textAlign`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#textalign) property controls text alignment within the label boundaries. Available alignment options include left, right, center, and justify, providing flexibility for various content layouts.

The following code demonstrates text alignment configuration:

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Right',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Right',
        },
      },
    ],
  },
  {
    id: 'node2',
    // Position of the node
    offsetX: 300,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Center',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Center',
        },
      },
    ],
  },
  {
    id: 'node3',
    // Position of the node
    offsetX: 500,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Left',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Left',
        },
      },
    ],
  },
  {
    id: 'node4',
    // Position of the node
    offsetX: 700,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Justify',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Justify',
        },
      },
    ],
  },];
  let connectors = [
    {
      sourcePoint: { x: 100, y: 200 },
      targetPoint: { x: 300, y: 300 },
      type: 'Orthogonal',
      //Path annotation offset
      annotations: [
        {
          content: 'long annotation content for connector anntoation',
          width: 100,
          offset: 0.2,
          style: { textAlign: 'Right' },
        },
      ],
    },
    {
      sourcePoint: { x: 300, y: 200 },
      targetPoint: { x: 500, y: 300 },
      type: 'Orthogonal',
      //Path annotation offset
      annotations: [
        {
          content: 'long annotation content for connector anntoation',
          width: 100,
          offset: 0.2,
          style: { textAlign: 'Center' },
        },
      ],
    },
    {
      sourcePoint: { x: 500, y: 200 },
      targetPoint: { x: 700, y: 300 },
      type: 'Orthogonal',
      //Path annotation offset
      annotations: [
        {
          content: 'long annotation content for connector anntoation',
          width: 100,
          offset: 0.2,
          style: { textAlign: 'Left' },
        },
      ],
    },
    {
      sourcePoint: { x: 700, y: 200 },
      targetPoint: { x: 900, y: 300 },
      type: 'Orthogonal',
      //Path annotation offset
      annotations: [
        {
          content: 'long annotation content for connector anntoation',
          width: 100,
          offset: 0.2,
          style: { textAlign: 'Justify' },
        },
      ],
    },
  ];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connectors}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}


import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel,
    ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
  id: 'node1',
  // Position of the node
  offsetX: 100,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the NOde
  annotations: [
    {
      content: 'Text align is set as Right',
      // Sets the textAlign as left for the content
      style: {
        textAlign: 'Right',
      },
    },
  ],
},
{
  id: 'node2',
  // Position of the node
  offsetX: 300,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the NOde
  annotations: [
    {
      content: 'Text align is set as Center',
      // Sets the textAlign as left for the content
      style: {
        textAlign: 'Center',
      },
    },
  ],
},
{
  id: 'node3',
  // Position of the node
  offsetX: 500,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the NOde
  annotations: [
    {
      content: 'Text align is set as Left',
      // Sets the textAlign as left for the content
      style: {
        textAlign: 'Left',
      },
    },
  ],
},
{
  id: 'node4',
  // Position of the node
  offsetX: 700,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the NOde
  annotations: [
    {
      content: 'Text align is set as Justify',
      // Sets the textAlign as left for the content
      style: {
        textAlign: 'Justify',
      },
    },
  ],
},];
let connectors: ConnectorModel[] = [
  {
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Right' },
      },
    ],
  },
  {
    sourcePoint: { x: 300, y: 200 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Center' },
      },
    ],
  },
  {
    sourcePoint: { x: 500, y: 200 },
    targetPoint: { x: 700, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Left' },
      },
    ],
  },
  {
    sourcePoint: { x: 700, y: 200 },
    targetPoint: { x: 900, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Justify' },
      },
    ],
  },
];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
      connectors={connectors}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);




{% endhighlight %}
{% endtabs %}

 

The following table shows the different text alignment.

|Text Align|Output image|
|-----|-----|
|Right|![Text align right](https://ej2.syncfusion.com/react/documentation/diagram/images/textalign-right.png)|
|Left|![Text align left](https://ej2.syncfusion.com/react/documentation/diagram/images/textalign-left.png)|
|Center|![Text align center](https://ej2.syncfusion.com/react/documentation/diagram/images/textalign-center.png)|
|Justify|![Text align justify](https://ej2.syncfusion.com/react/documentation/diagram/images/textalign-justify.png)|

## Text Wrapping

When label text exceeds node or connector boundaries, the [`text wrapping`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#textwrapping) property controls how content is handled. Text can be wrapped into multiple lines based on the specified wrapping behavior.

The following code shows text wrapping implementation:

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    //Sets the annotation for the node
    annotations: [
      {
        content: 'Annotation Text WrapWithOverflow',
        // Sets the style for the text wrapping
        style: {
          textWrapping: 'WrapWithOverflow',
        },
      },
    ],
  },
  {
    id: 'node2',
    // Position of the node
    offsetX: 300,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    //Sets the annotation for the node
    annotations: [
      {
        content: 'Annotation Text Wrap',
        // Sets the style for the text wrapping
        style: {
          textWrapping: 'Wrap',
        },
      },
    ],
  },
  {
    id: 'node3',
    // Position of the node
    offsetX: 500,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    //Sets the annotation for the node
    annotations: [
      {
        content: 'Annotation Text NoWrap',
        // Sets the style for the text wrapping
        style: {
          textWrapping: 'NoWrap',
        },
      },
    ],
  },];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}


import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
  id: 'node1',
  // Position of the node
  offsetX: 100,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  //Sets the annotation for the node
  annotations: [
    {
      content: 'Annotation Text WrapWithOverflow',
      // Sets the style for the text wrapping
      style: {
        textWrapping: 'WrapWithOverflow',
      },
    },
  ],
},
{
  id: 'node2',
  // Position of the node
  offsetX: 300,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  //Sets the annotation for the node
  annotations: [
    {
      content: 'Annotation Text Wrap',
      // Sets the style for the text wrapping
      style: {
        textWrapping: 'Wrap',
      },
    },
  ],
},
{
  id: 'node3',
  // Position of the node
  offsetX: 500,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  //Sets the annotation for the node
  annotations: [
    {
      content: 'Annotation Text NoWrap',
      // Sets the style for the text wrapping
      style: {
        textWrapping: 'NoWrap',
      },
    },
  ],
},];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);




{% endhighlight %}
{% endtabs %}

 

| Value | Description | Image |
| -------- | -------- | -------- |
| No Wrap | Text will not be wrapped. | ![Label No Wrap](https://ej2.syncfusion.com/react/documentation/diagram/images/wrap1.png) |
| Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Label Wrap](https://ej2.syncfusion.com/react/documentation/diagram/images/wrap2.png) |
| WrapWithOverflow (Default) | Text wrapping occurs with overflow allowed for very long words that cannot be broken. | ![Label WrapWith Overflow](https://ej2.syncfusion.com/react/documentation/diagram/images/wrap3.png) |

## Text overflow

The label’s [`TextOverflow`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel#textoverflow) property manages content display when text exceeds the available label space. This property works in conjunction with text wrapping to provide comprehensive text handling.

Available overflow options include:

- **Clip** - Overflowing content beyond node boundaries is removed.
- **Ellipsis** - Overflowing content is replaced with three dots (...).
- **Wrap** - Content renders with vertical overflow and horizontal wrapping.

The types of text overflow are shown in the following table.

|TextOverflow|output image|
|-----|-----|
|Clip|![Text Overflow Clip](https://ej2.syncfusion.com/react/documentation/diagram/images/text-overflow-clip.png)|
|Ellipsis|![Text Overflow Ellipsis](https://ej2.syncfusion.com/react/documentation/diagram/images/text-overflow-ellipsis.png)|
|Wrap(Default)|![Text Overflow Wrap](https://ej2.syncfusion.com/react/documentation/diagram/images/text-overflow-wrap.png)|

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Clip Wrap',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Clip', textWrapping: 'Wrap' },
      },
    ],
  },
  {
    // Position of the node
    offsetX: 300,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Clip NoWrap',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Clip', textWrapping: 'NoWrap' },
      },
    ],
  },
  {
    // Position of the node
    offsetX: 500,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Clip WrapWithOverflow',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Clip', textWrapping: 'WrapWithOverflow' },
      },
    ],
  },

  {
    // Position of the node
    offsetX: 100,
    offsetY: 300,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Ellipsis Wrap',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Ellipsis', textWrapping: 'Wrap' },
      },
    ],
  },
  {
    // Position of the node
    offsetX: 300,
    offsetY: 300,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Ellipsis NoWrap',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Ellipsis', textWrapping: 'NoWrap' },
      },
    ],
  },
  {
    // Position of the node
    offsetX: 500,
    offsetY: 300,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Ellipsis WrapWithOverflow',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Ellipsis', textWrapping: 'WrapWithOverflow' },
      },
    ],
  },

  {
    // Position of the node
    offsetX: 100,
    offsetY: 700,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Wrap Wrap',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Wrap', textWrapping: 'Wrap' },
      },
    ],
  },
  {
    // Position of the node
    offsetX: 300,
    offsetY: 500,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Wrap NoWrap',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Wrap', textWrapping: 'NoWrap' },
      },
    ],
  },
  {
    // Position of the node
    offsetX: 500,
    offsetY: 700,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [
      {
        content: 'Wrap WrapWithOverflow',
        offset: { x: 0.5, y: 1.4 },
      },
      {
        content:
          'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
        style: { textOverflow: 'Wrap', textWrapping: 'WrapWithOverflow' },
      },
    ],
  },];
// initialize Diagram component
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}


import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    DiagramComponent,
    NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
  // Position of the node
  offsetX: 100,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'WrapWithOverflow' },
    },
  ],
},

{
  // Position of the node
  offsetX: 100,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'WrapWithOverflow' },
    },
  ],
},

{
  // Position of the node
  offsetX: 100,
  offsetY: 700,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 500,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 700,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'WrapWithOverflow' },
    },
  ],
}];
// initialize Diagram component
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      nodes={node}
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);




{% endhighlight %}
{% endtabs %}

 

## See also

* [Labels](./labels)
* [Label interaction](./label-interaction)
* [Label events](./label-events)