{"id":18109,"date":"2019-06-13T12:45:41","date_gmt":"2019-06-13T10:45:41","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=18109"},"modified":"2026-01-12T11:31:15","modified_gmt":"2026-01-12T11:31:15","slug":"how-to-use-an-org-chart-more-effectively","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/best-practices\/how-to-use-an-org-chart-more-effectively\/","title":{"rendered":"How to use an Org chart more effectively"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>An <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/organization-chart\">Organization Chart<\/a> 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 <a href=\"https:\/\/www.highcharts.com\/demo\/network-graph\">Network Graph<\/a> or <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/treemap\">Treemap series<\/a>, the Organization Chart is unique in that there is always a top node from which all other nodes in the network flows.<\/p>\n<p>This example below displays the <a href=\"https:\/\/unstats.un.org\/unsd\/osd.htm\">Statistics division organization chart<\/a> of the United Nations (<a href=\"https:\/\/codepen.io\/mushigh\/full\/gJEZxm\">demo<\/a>):<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"A Highcharts organisation chart displays the Statistics division organization chart of the United Nations \" src=\"https:\/\/codepen.io\/mushigh\/embed\/gJEZxm?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"720\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/gJEZxm\">Highcharts organisation chart<\/a> by mustapha<br \/>\n(<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>The user can see with ease the elements of the entire organization, the nature of the structure, and the different branches.<\/p>\n<p>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 [\u2018Superior, &#8216;Subordinate&#8217;]. 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.<\/p>\n<p>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.<\/p>\n<p>To add the extra information and the colors, use the <code>nodes<\/code> option, where you can refer to each element by its ID, then add the right color or the information. For example, the <b>Executive Support Unit<\/b> has the following structure in the <code>nodes<\/code> option:<\/p>\n<pre>{\r\n  id: 'ESU',\r\n  title: null,\r\n  name: 'Executive Support Unit',\r\n  layout: 'hanging',\r\n  color: \"#41c0a4\",\r\n  info: \"Planning and coordination of the overall Division\u2019s work program and operation, including program management finance\/budget management, human resources management, and general office administration\"\r\n}<\/pre>\n<p>The color and the extra information are saved respectively in the <code>color<\/code> and <code>info<\/code> properties.<\/p>\n<p>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 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Carnivora\">Carnivora Phylogeny<\/a>, with a horizontal orientation (<a href=\"https:\/\/codepen.io\/mushigh\/full\/eaeJez\">demo<\/a>):<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"A Highcharts organisation chart displays a simplified Carnivora Phylogeny, with a horizontal orientation \" src=\"https:\/\/codepen.io\/mushigh\/embed\/eaeJez?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"720\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/eaeJez\">Highcharts organisation chart: Carnivora tree <\/a> by mustapha<br \/>\n(<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>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.<\/p>\n<p>To create a horizontal organization chart, all you have to do is to set up the <code>inverted<\/code> option to false:<\/p>\n<pre>chart: {\r\n  height: 600,\r\n  inverted: false\r\n},<\/pre>\n<p>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:<\/p>\n<pre>image:\"https:\/\/raw.githubusercontent.com\/mekhatria\/demo_highcharts\/master\/panthera.png\"<\/pre>\n<p>The organization chart offers a familiar and intuitive way to visualize hierarchical structures. Feel free to check the <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.organization\">API<\/a> to learn more about the features and options available to you as you make use of Highcharts\u2019 organization chart.<\/p>\n<p>Don\u2019t forget to share your comments or questions in the comments area below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an interactive organisational chart using Highcharts. <\/p>\n","protected":false},"author":32,"featured_media":18151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1104],"tags":[1063,1094],"coauthors":[699],"class_list":["post-18109","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices","tag-data-visualization","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18109"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18109\/revisions"}],"predecessor-version":[{"id":29204,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18109\/revisions\/29204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/18151"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18109"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}