Get started with orgchart CDN

MIT licensed

Orgchart.js: Open-source library for dynamic, interactive org charts in browsers.

Tags:
  • jquery
  • plugin
  • organization
  • chart
  • orgchart
  • tree
  • tree-like
  • tree-view

Stable version

Copied!

How to start using orgchart CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with orgchart CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.cdnhub.io/orgchart/4.0.1/css/jquery.orgchart.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.cdnhub.io/orgchart/4.0.1/js/jquery.orgchart.min.js"></script>
    <style>
        #orgchart { width: 100%; height: 80vh; }
    </style>
</head>
<body>
    <div id="orgchart"></div>

    <script>
        $(function() {
            $('#orgchart').orgchart({
                data: [
                    { id: 1, name: 'CEO', children: [2, 3] },
                    { id: 2, name: 'CTO', children: [4, 5] },
                    { id: 3, name: 'CFO', children: [6] },
                    { id: 4, name: 'Developer 1' },
                    { id: 5, name: 'Developer 2' },
                    { id: 6, name: 'Tester' }
                ],
                nodeContent: 'name'
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions