Node annotations in Vue Diagram component
28 Mar 202520 minutes to read
Diagram allows you to customize the position and appearance of the annotation efficiently. Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment properties. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the ShapeAnnotation class. Annotations of a node can be positioned using the following properties of ShapeAnnotation.
- Offset
- HorizontalAlignment
- VerticalAlignment
- Margin
Set annotation offset and size
The offset property of an annotation is used to align annotations based on fractional values. The offset can be customized by modifying the x and y values of the offset property. By default, the annotation offset is set to 0.5 on both the x and y axes.
By default, the size of the annotation is calculated based on its content. If you want to set the size externally, you can do so using the width and height properties of annotation.
The following code shows how to set offset, height and width for the annotation.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
// Sets the content for the annotation
content: 'Annotation long annotation content',
//Sets the offset for the content
offset: {
x: 0,
y: 1
},
height: 100,
width: 100,
}]
}];
const width = "750px";
const height = "350px";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
// Sets the content for the annotation
content: 'Annotation long annotation content',
//Sets the offset for the content
offset: {
x: 0,
y: 1
},
height: 100,
width: 100,
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Update annotation offset at runtime
The annotation offset can be updated dynamically at runtime. To update the annotation offset, fetch the annotation you want to update and modify its offset.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
// Sets the content for the annotation
content: 'Annotation long annotation content',
//Sets the offset for the content
offset: {
x: 0,
y: 1
},
height: 100,
width: 100,
}]
}];
const width = "750px";
const height = "350px";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
// Sets the content for the annotation
content: 'Annotation long annotation content',
//Sets the offset for the content
offset: {
x: 0,
y: 1
},
height: 100,
width: 100,
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>NOTE
Call
dataBind()after property change to reflect the changes instantly.
The following table shows the position of annotation with different offsets.
| offset | image | |
|---|---|---|
| Top Left {x:0,y:0} |  |
|
| Middle left {x:0,y:0.5} |  |
|
| Bootom left {x:0,y:1} |  |
|
| Middle Top {x:0.5,y:0} |  |
|
| Center {x:0.5,y:0.5} |  |
|
| Middle Bottom {x:0.5,y:1} |  |
|
| Top right {x:1,y:0} |  |
|
| Middle right {x:1,y:0.5} |  |
|
| Bottom right {x:1,y:1} |  |
Annotation alignment
The horizontalAlignment property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The verticalAlignment property is used to set how annotation is vertically aligned at the annotation position.
The following codes illustrates how to align annotations.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [{
// 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'
}]
}];
const width = "100%";
const height = "350px";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// 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'
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>The following tables illustrates all the possible alignments visually with ‘offset (0, 0)’.
| Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) |
|---|---|---|
| Left | Top |  |
| Center | Top |  |
| Right | Top |  |
| Left | Center |  |
| Center | Center |  |
| Right | Center |  |
| Left | Bottom |  |
| Center | Bottom |  |
| Right | Bottom |  |
Update annotation alignment at runtime
Annotation alignment can be updated dynamically at runtime. The following code example shows how to update annotation alignment at runtime.
<template>
<div id="app">
<ejs-button ref="updateAlignment" id="updateAlignment" >Update Alignment</ejs-button>
<ejs-diagram ref="diagram" id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
const nodes = [{
// 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',
}]
}];
const diagram = ref(null);
const updateAlignment = ref(null);
const width = "750px";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
const updateAlignmentInstance = updateAlignment.value.ej2Instances;
updateAlignmentInstance.element.onclick = () => {
diagramInstance.nodes[0].annotations[0].horizontalAlignment = 'Right';
diagramInstance.nodes[0].annotations[0].verticalAlignment = 'Bottom';
diagramInstance.dataBind();
}
})
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button ref="updateAlignment" id="updateAlignment" >Update Alignment</ejs-button>
<ejs-diagram ref="diagram" id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
let nodes = [{
// 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',
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
'ejs-button': ButtonComponent,
},
data() {
return {
width: "100%",
height: "500px",
nodes: nodes
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
const updateAlignment = this.$refs.updateAlignment.ej2Instances;
//Updates alignment
updateAlignment.element.onclick = () => {
diagramInstance.nodes[0].annotations[0].horizontalAlignment = 'Right';
diagramInstance.nodes[0].annotations[0].verticalAlignment = 'Bottom';
diagramInstance.dataBind();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>