Tree Charts


A tree chart allows for nodes to be connected via node hubs thus making it a great solution for family trees and other types of organizational charts. There are a number of different styling methods and attributes to display the information in various forms.

An example of a tree chart:

Let’s discuss the JSON chart configuration for tree charts:
The chart json will be similar to other ZingCharts but with a few differences. The chart type needs to be set as tree. Furthermore, the options objects will have certain attributes and objects that will style the tree charts. This is where the aspect attribute in the options object will be set to graph because we are implementing a graph tree chart. There are new attributes such as springLength, attractionConstant, repulsionConstant and repulsionDistanceFactor which will determine the length, repulsion, attraction and interactions of the links and nodes.

The attraction constant and repulsion constant is used to determine the amount of magnetization between each node. The constants used in the above demo will give the graph tree chart a balanced amount of distance and attraction.

The node object is important in the graph tree chart but it is very similar to the node object in other charts such as the scatter chart. This is where styling of the nodes will be added. Styling of individual nodes will go inside the series array.

A new object that needs to be addressed is the node[cls-fam] object. This is the how we style the hub nodes. This object can take the same attributes as the node objects except that it will target the hub nodes instead of the data nodes. The cls-fam nomenclature stems from how we set the series array in the tree chart.

For the series array in a graph tree chart, each object will have a few attributes needed for it to work. First will be the type attribute. The type attribute should be node, meaning each series will be a floating node. For this type of tree chart there will be a main node that will link the other nodes which will contain the information such as the images. This main node holds the family trees together and will be called n1, n2, n3 and so forth.

A standard family node will go like this:

{ type: 'node', id: 'n1', cls : 'fam', text: '', dataFullname: '' }

We will begin linking other data nodes to this main node hub. The data node objects will have a few attributes that we need to fill out. The first being the type. The type will be node. Furthermore we need to assign an id to this object so that we can target and link it to the hub nodes. The id attribute can be assigned anything and will most likely describe what the data node represents such as one for "Ned Stark".

Now we can style the nodes. The node styling will go under the style object inside the series object. This is where we will be able to set the backgroundImage, size and many other ZingChart styling basics for the nodes. When using backgroundImage, it is useful to use background-fit: 'xy' so that the image will be centered and show properly inside the small node area.

With each new family or group on the graph tree charts, we need to have a new hub node so that the families will have their own hub to link to. These will have the ids of n1, n2 and so forth. The best way to organize these for ease of reading and use would be to have the main hub series above the same family series that will be tied to that hub. An example is:

  type: 'node',
  id: 'n3',
  cls : 'fam',
  text: ' ',
  type: 'node', 
  id: 'Rhaegar Targaryen', 
  text: 'Rhaegar Targaryen', 
  dataFullname: 'Rhaegar Targaryen', 
  style: { 
    'background-fit': 'xy',    
    backgroundImage : ''

Once we have our families and data nodes set we can link them together using Link objects. Link objects will target the id attribute and draw a link from the source to the target. In our case, the source will be the node hubs of n1, n2 and n3 and the target will be the other nodes with ids such as Ned Stark. These link objects are in the series array. An example of a link object would be like this:

{ type: 'link', source : 'n1', target : 'Ned Stark' }

Every data node will need a link object so that it will be connected to the chose hub node. A data node can be linked to multiple family trees by linking them to multiple hub nodes.

In order to style the link object, there will be a separate link object inside the chart JSON. The JSON link object allows for styling the lines that connect the organizational chart nodes. This object can take most of the standard line styling attributes that are common in other charts such as the line chart.

We can now render the tree graph chart using the standard Zingchart render method.

Detaching Nodes

You can detach nodes/groups in you diagram. You can do this dynamically through our API or on render

Tree Diagram

You can create a general tree diagram with collapsable nodes.

Organizational Diagram

A subset of the tree module is organizational charts. These charts show the structure of an organization or relationships. They can be top-down, left to right or other configurations. The most common type is the top-down configuration so we will describe how to set one of these organizational charts up.

Organizational charts share many of the same attributes and setup of the tree graph charts because they are a subset of tree charts.

In the series array there are several key topics that will change the way to set this up. In the chart JSON options object, the aspect will be set to tree-down. This is how the organizational chart knows where the parent nodes will start from. Furthermore, there will be a orgChart attribute that needs to be set to true for the organizational charts to function.

The next difference between the tree graph charts and organizational charts can be seen in the series array. Each object in the series array for organizational charts correspond to a node. Each will have an id and name attribute. These id attributes will be used to target the nodes for parent and sibling attributes that some nodes will contain. The parent attribute and siblings attribute is how we link different nodes together.

Lastly, there will be a cls attribute. This attribute is set to a variable which can then be targeted in the chart JSON so that the individual nodes can be styled. If the cls attribute is set to nsrv_p, then in the chart JSON there can be a root object node[cls-nsrv_p]. In this root object, you can set different styling attributes such as backgroundColor, labels objects and more.

Here is a demo for how to set up a standard organizational tree chart:


Events for clicking nodes will NOT be node_click and instead be shape_click because at the core network diagrams are class shapes, not nodes.


Use the shape_click event to fire clicking on nodes and clusters for network diagrams.


To see more demos of tree charts have a look at our CodePen!