We got a wonderful soultion for hybrid mode

Author: dabeng

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <dabeng413@gmail.com>"

dist/css/jquery.orgchart.css

@@ -73,7 +73,7 @@
 }
 .orgchart .verticalNodes>td::before {
   content: '';
-  border: 1px solid rgba(217, 83, 79, 1);
+  border: 1px solid rgba(217, 83, 79, 0.8);
 }
 .orgchart .verticalNodes>td>ul>li:first-child::before {
   top: -4px;
@@ -89,7 +89,7 @@
   content: '';
   position: absolute;
   left: -6px;
-  border-color: rgba(217, 83, 79, 1);
+  border-color: rgba(217, 83, 79, 0.8);
   border-style: solid;
   border-width: 0 0 2px 2px;
 }

examples/vertical-depth/index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="../../dist/css/jquery.orgchart.css">
     <link rel="stylesheet" href="../css/style.css">
     <style type="text/css">
+      #chart-container { height:  620px; }
       .orgchart { background: white; }
     </style>
 </head>

examples/vertical-depth/scripts.js

@@ -8,33 +8,37 @@
       'name': 'Lao Lao',
       'title': 'general manager',
       'children': [
-        { 'name': 'Bo Miao', 'title': 'department manager',
-          'children': [
-            { 'name': 'Ren Wu', 'title': 'senior engineer' },
-            { 'name': 'Wo Ge', 'title': 'senior engineer' },
-            { 'name': 'Fei Xuan', 'title': 'engineer' }
-          ]
-        },
+        { 'name': 'Bo Miao', 'title': 'department manager' },
         { 'name': 'Su Miao', 'title': 'department manager',
           'children': [
             { 'name': 'Tie Hua', 'title': 'senior engineer' },
             { 'name': 'Hei Hei', 'title': 'senior engineer',
               'children': [
-                { 'name': 'Pang Pang', 'title': 'engineer',
-                  'children': [
-                    { 'name': 'Dan Zai', 'title': 'intern' },
-                    { 'name': 'Er Dan Zai', 'title': 'intern' }
-                  ]
-                }
+                { 'name': 'Pang Pang', 'title': 'engineer' },
+                { 'name': 'Xiang Xiang', 'title': 'UE engineer' ,
+                'children': [
+            { 'name': 'Tie Hua', 'title': 'senior engineer' },
+            { 'name': 'Hei Hei', 'title': 'senior engineer',
+              'children': [
+                { 'name': 'Pang Pang', 'title': 'engineer' },
+                { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
+              ]
+            }
+          ]}
               ]
             }
           ]
         },
-        { 'name': 'Hong Miao', 'title': 'department manager',
+        { 'name': 'Hong Miao', 'title': 'department manager' },
+        { 'name': 'Chun Miao', 'title': 'department manager',
           'children': [
-            { 'name': 'Xing An', 'title': 'senior engineer' },
-            { 'name': 'Yi Dian', 'title': 'engineer' },
-            { 'name': 'Xiao Gang', 'title': 'engineer' }
+            { 'name': 'Bing Qin', 'title': 'senior engineer' },
+            { 'name': 'Yue Yue', 'title': 'senior engineer',
+              'children': [
+                { 'name': 'Er Yue', 'title': 'engineer' },
+                { 'name': 'San Yue', 'title': 'UE engineer' }
+              ]
+            }
           ]
         }
       ]
@@ -43,7 +47,8 @@
     $('#chart-container').orgchart({
       'data' : datascource,
       'nodeContent': 'title',
-      'verticalDepth': 3
+      'verticalDepth': 3,
+      'depth': 4
     });
 
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.js",
   "style": [