Style Node Of Dabeng's Orgchart Library

I am using the Dabeng Orgchart library (great library, btw), but I would like to customize the nodes, specifically creating a diamond instead of the squares they have in most examp

Solution 1:

I am currently using the nodeTemplate attribute for the orgchart. Example:

var oc = $('#container').orgchart({
   ...
   'nodeTemplate': orgTemplate,
   ...
});

In your orgtemplate function, data is whatever you have included in your orgchart data (in the example it would be name and title). You can stuff this object with other flags. For example, I have a chart in which I create new nodes and allow users to enter data into the node before committing it to the graph. I have a flag in my data object for data.isSaved to tell my template whether or not this node is saved or not. If it is saved, I have inline html checks (in AngularJS using ngIf's and the like, if you're familiar with AngularJS at all) to change the template based on the data.

In VanillaJS, you can just return pure HTML without the $compile and all that attached to pump in your own node template. You could actually do your check within the function for example:

function orgTemplate(data) {
    if(data.isDiamond) {
       return'<div class="diamond">...</div>';
    } else {
       return'<div class="square">...</div>';
    }
}

I'm using AngularJS in my website so I define new scopes and use angular directives to make it more expandable. This is for reference for anyone else who stumbles upon this. My orgTemplate function is defined below.

function orgTemplate(data) {
    var newScope = $scope.$new(true);
    newScope.data = data;
    return ( $compile('<div data-ng-include="\'.../template.html\'"></div>')(newScope));
}

Here's the orgChart Github as I'm sure you've browsed many times. If you look at the bottom you will see the nodeTemplate attribute definition I mention above. Hope this helps!

Side Note: I have had some trouble with styling when using custom templates, especially when defining different graph directions (i.e. 'l2r').

Solution 2:

You can now customize your own node structure or shape with option "ndoeTemplate":

var nodeTemplate = function(data) {
  return `
    <span class="office">${data.office}</span>
    <div class="title">${data.name}</div>
    <div class="content">${data.title}</div>
  `;
}

var oc = $('#chart-container').orgchart({
  'data' : ds,
  'nodeTemplate': nodeTemplate
});

Feel free to play around with this demo.

Solution 3:

I would suggest you to use getorgchart instead it is highly customizable

http://www.getorgchart.com/Demos/Create-Your-Own-Theme-4