How to Render an Image in Radial Tree Using Vue Diagram?

3 mins read

The Syncfusion® Vue Diagram allows you to create various types of diagrams, including hierarchical and radial tree layouts. In certain scenarios, you may need to display an image within a node in a RadialTree layout. You can achieve this by using the setNodeTemplate property, which allows you to customize the content of each node.

In this article, we will demonstrate how to render an image inside a node in a RadialTree layout using the Syncfusion® Vue Diagram.

Define a dataset where each node contains an ImageUrl property that holds the URL of the image you want to display.

Use the setNodeTemplate function to customize the node’s appearance. This function allows you to define how the content of each node is structured. Here, we will use an ImageElement inside a StackPanel to display the image within the node.

Each object in the array includes an ImageUrl property that points to the image you want to display for the corresponding node.each node has an Id, Name, Designation, and an ImageUrl. The ImageUrl is a direct link to the image that will be displayed inside the node.

const radialSource = [
 {
   'Id': 'parent', 'Name': 'Maria Anders', 'Designation': 'Managing Director', 
   'ImageUrl': 'https://ej2.syncfusion.com/react/demos/src/diagram/employees/image30.png'
 },
 {
   'Id': 1, 'Name': 'Ana Trujillo', 'Designation': 'Project Manager',
   'ReportingPerson': 'parent', 
   'ImageUrl': 'https://ej2.syncfusion.com/react/demos/src/diagram/employees/image30.png'
 },
];

Using the setNodeTemplate property to define the structure of each node.

// Customize node template 
setNodeTemplate: (obj, diagram) => {

       // Create a StackPanel to arrange child elements
       let content = new StackPanel();
       content.id = obj.id + '_outerstack';
       content.orientation = 'Horizontal';
       content.style.strokeColor = 'gray';
       content.padding = { left: 5, right: 10, top: 5, bottom: 5 };

       // Create an ImageElement to display the image
       let image = new ImageElement();
       image.width = 50;
       image.height = 50;
       image.style.strokeColor = 'none';
       image.source = obj.data.ImageUrl;
       image.id = obj.id + '_pic';

       // Add the image to the stack panel
       content.children = [image];
       return content;
     },

A StackPanel is used to arrange child elements (in this case, the image). You can control the positioning and styling of the elements inside the StackPanel.

An ImageElement is created, and its source property is bound to the ImageUrl from the dataset.

This ensures that the correct image is displayed for each node.The image is styled (in this case, with no border) and added to the StackPanel. The StackPanel is then set as the content of the node.

Sample:
You can try this code example in the following StackBlitz

Conclusion
I hope you enjoyed learning how to render an image in radial tree using Vue Diagram.
You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue 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!

How to Render an Image in Radial Tree Using Vue Diagram?

Access denied