Labels in React Diagram Component
21 Oct 202518 minutes to read
Annotation is a block of text that can be displayed over a node or connector. Annotations are used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node or connector.
Create Annotations
An annotation can be added to a node or connector by defining the annotation object and adding it to the annotations collection of the node or connector. The content property of the annotation defines the text to be displayed. The following code illustrates how to create an annotation.
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,
// Sets the Annotation for the Node
annotations: [{
// Sets the text to be displayed
content: 'Annotation'
}]
}];
let connector = [{
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 300
},
type: 'Orthogonal',
// Sets the Annotation for the Connector
annotations: [{
// Sets the text to be displayed
content: 'Annotation'
}]
}];
// 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 />);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[] = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
// Sets the Annotation for the Node
annotations: [{
// Sets the text to be displayed
content: 'Annotation'
}]
}];
let connector: ConnectorModel[] = [{
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 300
},
type: 'Orthogonal',
// Sets the Annotation for the Connector
annotations: [{
// Sets the text to be displayed
content: 'Annotation'
}]
}];
// 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 />);NOTE
When setting an Annotation’s ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces.
Add annotations at runtime
Annotations can be added at runtime by using the client-side method addLabels. The following code illustrates how to add an annotation to a node.
The annotation’s id property is used to define the name of the annotation and is further used to find the annotation at runtime and perform any customization.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
// 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,
}];
let annotation = [{
id: 'label1',
content: 'Annotation'
}];
// initialize Diagram component
function App() {
const addAnnotation = () => {
//Method to add labels at run time
diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
diagramInstance.dataBind();
};
return (
<div>
<button id="addAnnotation" onClick={addAnnotation}>Add Annotation</button>
<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
NodeModel,
DiagramComponent,
ShapeAnnotationModel
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
// 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,
}];
let annotation: ShapeAnnotationModel[] = [{
id: 'label1',
content: 'Annotation'
}];
// initialize Diagram component
function App() {
const addAnnotation = () => {
//Method to add labels at run time
diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
diagramInstance.dataBind();
};
return (
<div>
<button id="addAnnotation" onClick={addAnnotation}>Add Annotation</button>
<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Update annotations at runtime
Annotations can be updated directly by accessing the annotation from the node’s annotations collection property and modifying any annotation properties at runtime. To reflect the changes immediately, call the dataBind method.
The following code example illustrates how to change the annotation properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
// 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'
}]
}];
// initialize Diagram component
function App() {
const updateAnnotation = () => {
//Method to update the annotation at run time
diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
diagramInstance.dataBind();
};
return (
<div>
<button id="updateAnnotation" onClick={updateAnnotation}>Update Annotation</button>
<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel,
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
// 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'
}]
}];
// initialize Diagram component
function App() {
const updateAnnotation = () => {
//Method to update the annotation at run time
diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
diagramInstance.dataBind();
};
return (
<div>
<button id="updateAnnotation" onClick={updateAnnotation}>Update Annotation</button>
<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Remove annotations
A collection of annotations can be removed from the node by using the diagram method removeLabels. The following code illustrates how to remove an annotation from a node.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
// 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'
}]
}];
// initialize Diagram component
function App() {
const removeAnnotation = () => {
//Method to remove labels at run time
diagramInstance.removeLabels(diagramInstance.nodes[0], diagramInstance.nodes[0].annotations);
};
return (
<div>
<button id="removeAnnotation" onClick={removeAnnotation}>remove Annotation</button>
<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
// 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'
}]
}];
// initialize Diagram component
function App() {
const removeAnnotation = () => {
//Method to remove labels at run time
diagramInstance.removeLabels(diagramInstance.nodes[0], diagramInstance.nodes[0].annotations);
};
return (
<div>
<button id="removeAnnotation" onClick={removeAnnotation}>remove Annotation</button>
<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);