• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

  • 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.

    Note: You can also set the aspect to 'tree-up', 'tree-right', or 'tree-left, but 'tree-down' is the most commonly used.

    {
      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,
      });
    }
    
    https://app.zingsoft.com/demos/embed/4S9FUH2M
    https://app.zingsoft.com/demos/embed/4S9FUH2M

    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
      }
    }
    
    https://app.zingsoft.com/demos/embed/KR6IA1Z7
    https://app.zingsoft.com/demos/embed/KR6IA1Z7

    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.

    Note: Node types are based on ZingChart shapes. Learn more with our Shapes Tutorial.

    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:

    Token Description
    %text The chart's text attribute.
    %value The nodes overall value.
    %data-xxx Custom token to be accessed.

    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'
      }
    }
    

    Note: Learn more about tooltips with our Tooltips Tutorial. For more tooltip styling options, see our Tooltips JSON Attributes/Syntax page.

    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.

    https://app.zingsoft.com/demos/embed/2CE2GU9F
    https://app.zingsoft.com/demos/embed/2CE2GU9F

    Methods

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

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