How to Add Hyperlinks to Nodes using Text Elements in Syncfusion JavaScript Diagrams

The Syncfusion® JavaScript Diagram offers powerful customization capabilities, especially through the setNodeTemplate function, which allows you to define both the style and functionality of nodes. This function is particularly effective when working with Automatic layouts, as it is invoked for each node during the diagram’s initialization.

To add hyperlinks to nodes, you can use the TextElement class. This allows you to make text within a node clickable, providing users direct access to external resources or websites by defining a URL. The ability to add hyperlinks enhances the interactivity of your diagrams, giving users the ability to navigate to relevant links directly from within the diagram nodes.

Begin by creating a StackPanel, which serves as a container for your diagram elements. Inside this panel, create a TextElement to display text. Use the content property to set the text for the node and set the hyperlink.link property to specify the URL associated with the text.

Here’s how you can add a hyperlink to a node:

// Function to add the template of the node.
function setNodeTemplate(obj) {
    var content = new ej.diagrams.StackPanel();
    content.id = obj.id + '_outerstack';
    content.orientation = 'Horizontal';
    content.style.strokeColor = 'gray';
    content.padding = { left: 5, right: 10, top: 5, bottom: 5 };

    // Initiate TextElement
    var text = new ej.diagrams.TextElement();
    // Add content of the TextElement
    text.content = obj.data.Name;
    // Add Link of the hyperlink 
    text.hyperlink = { link: "https://ej2.syncfusion.com/" };
    content.children = [text];
    return content;
} 

// Initialization of the diagram.
diagram = new Diagram({
    width: '100%', 
    height: '900px',
    // Configures organizational chart layout
    layout: { type: 'OrganizationalChart' },
    // Sets the parent and child relationship of DataSource.
    dataSourceSettings: dataSourceSettings,
    // Customization of the node.
    setNodeTemplate: setNodeTemplate,
});
diagram.appendTo('#diagram');

This approach enriches the diagram’s functionality by enabling users to access external resources or websites directly through clickable links embedded in the diagram nodes.

Sample: Click Here

Conclusion

I hope you learned about embedding a hyperlink into the nodes in a layout diagram. You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation on how to quickly get started with configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!