How to start step by step

This post shows you how to build a JavaScript organizational chart with OrgChart JS. Follow these simple steps to create interactive and customizable charts.

Creating a JavaScript organizational chart is a great way to visualize the structure of your organization. With OrgChart JS, you can quickly create interactive charts with minimal code.

What is OrgChart JS?

OrgChart JS is a JavaScript library for creating interactive and customizable organizational charts.

It runs on any server that supports HTML, does not depend on third-party JavaScript libraries, works in modern browsers, and uses SVG for rendering.

Getting Started

To get started with OrgChart JS, you can use the CDN version directly in your project.

Here are the 3 simple steps:

1. Include OrgChart JS

Add the script tag in your HTML page:

<script src="https://cdn.balkan.app/orgchart.js"></script>

2. Add a Container Element

Add a div where the chart will be rendered:

<div id="tree"></div>

You can set a specific width and height for the container to control chart size.

Add this CSS:

<style>
  html, body {
    width: 100%;
    height: 100%;
  }
  #tree {
    width: 100%;
    height: 100%;
  }
</style>

3. Initialize the Chart

Add a script block and initialize OrgChart JS:

<script>
    let chart = new OrgChart("#tree", {
        nodeBinding: {
            field_0: "name"
        },
        nodes: [
            { id: 1, name: "Amber McKenzie" },
            { id: 2, pid: 1, name: "Ava Field" },
            { id: 3, pid: 1, name: "Peter Stevens" }
        ]
    });
</script>

Here is the result:

Edit in BALKAN Code

In this example:

• nodes is the data source for the chart.
• id is mandatory and uniquely identifies each node.
• pid represents the parent ID and creates parent-child connections.
• nodeBinding maps the name field from your data to field_0 in the node template.

Customizing the Chart

OrgChart JS provides many options for customizing appearance and behavior.

You can change layouts, apply custom CSS styles, and enable features such as drag-and-drop interactions.

Conclusion

Creating an organizational chart with OrgChart JS is straightforward.

By following the steps above, you can build a functional and customizable organizational chart for teams of any size.

Happy charting.