We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add HTML elements in annotation

Platform: JavaScript - EJ 2 |
Control: Diagram

The diagram provides template support for annotation. You should define the SVG/HTML content as a string in the annotation’s template property.

The following code illustrates how to define a template in node’s annotation. Similarly, you can define it in connectors.

annotations: [{ template: '<div style="width:100%;height:100%">
<input type="button" value="Submit">
width: 57, height: 25 }]


By default, the template of the annotation will be stretched to the size of the node and connector. So, set the width and height to the annotation and also assign the width and height of the parent div as 100%.

Refer to the sample to set template for annotation as follows.

Link: https://stackblitz.com/edit/js-83dkaf?file=index.js


Also, refer to the appearance customization of annotation, dragging support for annotation, multiple annotations, and event for editing the annotation.

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile