Tree Charts

Organizational Diagram

To create an organizational diagram, set type: tree in the root and aspect: 'tree-down in the options object. This is how the organizational chart knows where the parent nodes will start from. You'll also need an orgChart attribute set to true for the organizational charts to function.

{
  options: {
		aspect : 'tree-down',
		orgChart : true,
  }
}

Organizational Diagram Data

Each object in the series array for organizational charts correspond to a node. Each will need 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 sibling attribute is how we link different nodes together.

Lastly, you'll want to add 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.

{
  series: [
    {
      id: 'execasspres',
      name: 'Executive Assistant to<br>the President',
      parent: 'collegeboard',
      sibling: 'president',
      cls: 'bwhite'
    },
  ]
}

Data

Provide your chart data in the series array. In the array, create an object and assign a value to the id, parent, name, and value, attributes. Alternatively, you can use the group attribute instead of the parent attribute.

id is the node id; parent specifies the parent node id; name is the label of the node; and value is the numerical value of the node object being added. Instead of parent, you can use group to specify which group the node is placed in.

{
  series: [
    {
      id: 'theworld',
      parent: '',
      name: 'The World',
    },
    {
      id: 'asia',
      parent: 'theworld',
      name: 'Asia',
      value: 4100000000
    },
  ]
}

Chart-Specific Properties

Style and customize your tree chart with certain attributes on the options object or dynamically through our API.

Detaching Nodes

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

// function to separate group from tree diagram
function removeNodeById(id) {
  zingchart.exec('myChart', 'tree.removenode', {
    id,
  });
}

Collapsible Nodes

Collapsible nodes are enabled on tree charts by default. Enable them manually with a weightedLinks attribute in the options object. Enter a value of 0 for true (default) or 1 for false.

{
  options: {
    weightedLinks: 0, // set to 1 to disable collapsible nodes
  }
}

Further Customization

Once you have your basic chart, you can customize and style it to fit your data visualization needs.

Node Connectors

Customize the lines that connect nodes with the link object. Include an aspect attribute with any of these values: arc (default), sibling, side-before, side-after, side-between, split, line.

options: {
  link: {
    aspect: 'arc', // sibling, side-before, side-after, side-between, split, line 
  }
}

Nodes

The node object is where the general styling of the nodes is. You can adjust the type, color, shape, size, hover effects here.

node: {
  type: 'circle',
  borderWidth: '0px',
  hoverState: {
    borderAlpha: 1,
    borderColor: '#000',
    borderWidth: '2px'
  },
  label: {
    width: '100px'
  },
  tooltip: {}
}

Tokens

Below is a short list of all the available tokens for tree charts:

Tooltip

You can adjust the tooltip value with the node.tooltip object. This object carries all standard styling from the tooltip object.

node: {
  tooltip: {
    padding: '8px 15px',
    text: 'My %text has a value of: %value'
  }
}

Events

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

shape_click

Use the shape_click event to fire clicking on nodes and clusters for network diagrams. You can view our object events documentation for more information.

shape_mouseover

Use the shape_mouseover event to fire hovering on nodes. You can view our object events documentation for more information.

Methods

To update the tree, you must use the setdata method.

zingchart.exec('myChart', 'setdata', {
  data: chartConfigObj
});