Kev 0

I'm working on a project where I need to render diagrams in the browser similar to this:

I've looked at a number of organisational charting tools such as the Google Visualisations Organisation Chart but none of them seem to let me change the orientation.

The nodes shown in the diagram above don't have to be icons, in fact I'd prefer to work with just plain old boxes where I can inject a snippet of HTML (in the same way you can do with the Google Visualisations Organisation Chart).

It would also be useful to be able to highlight a specific path through the chart, as the green lines in the example above do.

Does such a library exist?

1 answer

Ktash 1851
This was chosen as the best answer

The one I've used before is The JIT, and it was pretty good. You'll probably want to investigate and make sure it meets your requirements though. For me it didn't quite fit because I needed to show multiple paths to the same node, which it couldn't handle (at least at the time). But it was a good visualization tool and was fairly easy to use if I remember correctly.

Answered over 7 years ago by Ktash
  • The SpaceTree looks like the business. Supports left to right and highlighting a path. Good catch. Kev over 7 years ago
  • Ktash: I too am exploring usage Spacetree in JIT ( for javascript based org chart and I was searching on how to customize node ... I did see people providing implementation for $jit.ST.NodeTypes.Implementation but the code samples I saw for eg at: talks about simple changes. However, my org chart node is much more than a simple box. It's a box that has employee profile pic, a small arrow icon clicking on which shows a contextual menu, another icon, clicking on which shows an overlay with user information etc. So, the node itself could be like another "component". Based on your experience when you used it, could you customize the node to such an extent. Thanks much for help. Ram ram over 7 years ago