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

Connector annotation styling


I am trying to style the annotation for connector in a certain way , 

but I can't find any option to wrap the annotation with a black border.

obj.annotations = [{

        content: 'Verify to Pending, SEnd to Apporval, Label 3, Label 4, this is label 5, Verify Documents',

        margin: { top: 10, bottom: 10 },

        horizontalAlignment: 'Center',

        verticalAlignment: 'Top',


  style: {

            fill: 'white',

            strokeColor: 'black',

            strokeWidth: 10,

            fontSize: 10,



however , this doesn't provide the same look as above

Angular (forked) - StackBlitz

Can you please let me know if this is possible to achieve? having a border around the annotation

3 Replies 1 reply marked as answer

VG Vivisa Ganesan Syncfusion Team April 26, 2023 12:45 PM UTC


We have created the sample to achieve your requirement. By using annotation template for the connector, you can draw the border around the annotation similar to your image. Refer the below sample and documentation for reference.

Sample: https://stackblitz.com/edit/duuspv-x8eg4m?file=index.js,index.html

Documentation: https://ej2.syncfusion.com/javascript/documentation/diagram/labels/#template-support-for-annotation



Marked as answer

SD Sourangsu Dasgupta May 5, 2023 07:59 AM UTC

Our requirement is to find out all outgoing edges from a specific node on click event of the node and then highlight the connector as well as showing annotations. With the solution provided , we are able to achieve this. 

However, now with this introduction of annotation template , on click node event, after control passes on from custom js to ej2 js we get this error in console:

before the introduction of annotation template this was happening. FYI we are using custom html template within nodes and automatic layout.

SJ Sivaranjith Jeyabalan Syncfusion Team May 8, 2023 09:10 AM UTC

Hi Sourangsu,

We have created a sample in which we highlighted the outgoing connectors of selected node in click event. We don’t understand what you mean by “after control passes on from custom js to ej2 js we get this error in console”. Please check the sample below and if you still face any issue, modify the below sample to replicate the issue and provide us more details about the issue.

Sample: 3xsufa (forked) - StackBlitz

Live Chat Icon For mobile
Up arrow icon