Connector annotation styling

[Sourangsu Dasgupta]

Hi 

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

[Vivisa Ganesan]

Hi,

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

Regards,

Vivisa

[Sourangsu Dasgupta]

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.

[Sivaranjith Jeyabalan]

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