Labels in React Diagram component
6 Dec 202418 minutes to read
Annotation is a block of text that can be displayed over a node or connector. Annotation is used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node/connector.
Create annotation
An annotation can be added to a node/connector by defining the annotation object and adding that to the annotation collection of the node/connector. The content property of annotation defines the text to be displayed. The following code illustrates how to create a 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 />);Add annotations at runtime
Annotations can be added at runtime by using the diagram method addLabels. The following code illustrates how to add a annotation to a node.
The annotation’s id property is used to define the name of the annotation and its further used to find the annotation at runtime and do 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 />);Remove annotation
A collection of annotations can be removed from the node by using diagram method removeLabels. The following code illustrates how to remove a annotation to 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 />);Update annotation at runtime
You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. To reflect the changes immediately, we need to call dataBind.
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 />);