HTML Template and CSS in the Organization chart

18 Nov 20183 minutes to read

An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the type of layout should be set as an OrganizationalChart.

        function getLayoutInfo(node, tree) {
            if (!tree.hasSubTree) {
                tree.orientation = 'Vertical';
                tree.type = 'Right';
            }
        }
        function getNodeDefaults(obj, diagram) {
            obj.height = 100;
            obj.width = 250;
            obj.style = { fill: 'transparent', strokeWidth: 2 };
            obj.shape = {
                type: 'HTML',
                content:
                    `<div><div style=" width: 250px;background-color: #6BA5D7;height:100px; border: 2px solid darkblue; "><img src="https://ej2.syncfusion.com/angular/demos/` +
                    (obj.data).Image.replace('./', '') +
                    `"   style="width: 100px;height: 100px;border-radius: 50%;background-color: whitesmoke "/></div><div style=" margin-left: 125px; margin-top: -74px; font-size: 15px;">` +
                    (obj.data).Name +
                    `</div><div style=" margin-left: 125px; margin-top: 20px; font-size: 15px;">` +
                    (obj.data).Designation +
                    `</div></div>`
            };
        }
        function getConnectorDefaults(connector, diagram) {
            connector.targetDecorator.shape = 'None';
            connector.type = 'Orthogonal';
            connector.style.strokeColor = 'gray';
            return connector;
        }