How to use an Org chart more effectively

An Organization Chart helps you to display any organized structure and the main connections and ranks of the different elements within the structure. While other chart types can show the relationship between nodes, such as the Network Graph or Treemap series, the Organization Chart is unique in that there is always a top node from which all other nodes in the network flows.

This example below displays the Statistics division organization chart of the United Nations (demo):

The user can see with ease the elements of the entire organization, the nature of the structure, and the different branches.

To create this hierarchical effect in Highcharts, all you have to do is to set up a table where you link the ascendant and descendant elements, or the superior and subordinate members, like this example [‘Superior, ‘Subordinate’]. Notice the use of a different color for each branch; The colors help to guide the user to better and faster distinguish the branches and their elements.

To avoid overwhelming the user with too much information, you may display additional information for an element as a tooltip, triggered by hovering over the element.

To add the extra information and the colors, use the nodes option, where you can refer to each element by its ID, then add the right color or the information. For example, the Executive Support Unit has the following structure in the nodes option:

{
  id: 'ESU',
  title: null,
  name: 'Executive Support Unit',
  layout: 'hanging',
  color: "#41c0a4",
  info: "Planning and coordination of the overall Division’s work program and operation, including program management finance/budget management, human resources management, and general office administration"
}

The color and the extra information are saved respectively in the color and info properties.

You may also change the orientation to have the branches expand horizontally, read from left to right, instead of vertically. The demo below shows a simplified Carnivora Phylogeny, with a horizontal orientation (demo):

Contrary to the first demo where elements are displayed to show ranking, this demo focuses more on the evolutionary history and not ranking the elements. The demo makes this chart type function similarly to a flow-chart, but as opposed to a true flow-chart, the direction of the flow here is just inferred, not visualized.

To create a horizontal organization chart, all you have to do is to set up the inverted option to false:

chart: {
  height: 600,
  inverted: false
},

Notice how we have included pictures to improve the usability of some elements. Adding pictures to charts boxes or nodes is easy. Just use the following image option then add the link to the picture:

image:"https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/panthera.png"

The organization chart offers a familiar and intuitive way to visualize hierarchical structures. Feel free to check the API to learn more about the features and options available to you as you make use of Highcharts’ organization chart.

Don’t forget to share your comments or questions in the comments area below.