dabeng
Alignment issue in Angular version
If pass the below json, the org chart is breaking. Basically I wanted to see the two child side by side, but it is coming one below another. Also the root connection is breaking. Also is there any way to close all the child on initial load? The issue we can see in below blitz https://stackblitz.com/edit/ng-orgchart-demo-acxdr2?file=src/app/default-chart/default-chart.component.ts
ds = { "name": "AFC", "active": true, "display": "South Kerala AFC", "id": 31, "imagePath": "images1.jpeg", "title": "South Kerala AFC", "children": [{ "name": "Metro", "title": "TVM Metro", "active": true, "display": "TVM Metro", "id": 1024, "imagePath": "images1.jpeg", "children": [{ "display": "TVM Central Zone", "id": 10033, "name": "Zone", "title": "TVM Central Zone", "metroId": 1024, "active": true, "children": [{ "name": "Station", "title": "Nanthancodu", "display": "Nanthancodu", "id": 20025, "address": "103, Bains Compound Rd, Nanthancodu, Thiruvananthapuram, Kerala 695003, India", "latitude": 8.518047648346828, "longitude": 76.9534716301641, "active": true }, { "name": "Station", "title": "Killipalam", "display": "Killipalam", "id": 20027, "address": "Nedumcaud Rd, Killipalam, Karamana, Thiruvananthapuram, Kerala 695002, India", "latitude": 8.47997324589721, "longitude": 76.96481781868458, "active": true } ] }, { "display": "Kollam Zone", "id": 10035, "name": "Zone", "title": "Kollam Zone", "metroId": 1024, "active": true, "children": [{ "name": "Station", "title": "Karamana", "display": "Karamana", "id": 20026, "address": "Karamana Bus Stop, Thirumala Rd, Karamana Junction, Prem Nagar, Karamana, Thiruvananthapuram, Kerala 695002, India", "latitude": 8.4820127, "longitude": 76.9660789, "active": true }, { "name": "Station", "title": "Kollam Bypass", "display": "Kollam Bypass", "id": 20031, "address": "Kollam Bypass, Mylapure, Palathara, Kollam, Kerala 691021, India", "latitude": 8.883227060179841, "longitude": 76.63456083111727, "active": true }, { "name": "Station", "title": "Bavana Nagar", "display": "Bavana Nagar", "id": 20032, "address": "13, Bavana Nagar, Kollam, Kerala 691008, India", "latitude": 8.8932118, "longitude": 76.6141396, "active": true } ] }, { "name": "Tickets", "active": true, "display": "Ticket", "id": 15, "title": "tkt", "description": "tkt", "origin": 0, "destination": 0, "fare": 0, "issueAt": null, "validFor": 2, "mediaTypeObj": { "id": 1, "mediaName": "QR based ticket", "mediaCode": "QR", "active": true }, "journeyTypeObj": { "id": 1, "typeName": "SJT", "typeCode": "Single Journey Ticket", "active": true } } ] }, { "name": "Metro", "title": "ALEPY Metro", "active": true, "display": "ALEPY Metro", "id": 1025, "imagePath": "C:\\fakepath\\img2.png", "children": [{ "display": "Allepy Central Zone", "id": 10034, "name": "Zone", "title": "Allepy Central Zone", "metroId": 1025, "active": true, "children": [{ "name": "Station", "title": "Mullakkal", "display": "Mullakkal", "id": 20028, "address": "Cullen Rd, Vazhicherry Ward, Mullakkal, Alappuzha, Kerala 688001, India", "latitude": 9.498066699999999, "longitude": 76.3388484, "active": true }, { "name": "Station", "title": "Chungam", "display": "Chungam", "id": 20029, "address": "Palace Bridge (Kottarappalam), Chungam, Alappuzha, Kerala 688011, India", "latitude": 9.490207109766615, "longitude": 76.3428032743439, "active": true }, { "name": "Station", "title": "Kayamkulam", "display": "Kayamkulam", "id": 20030, "address": "Kayamkulam - Pathanapuram Rd, Kayamkulam, Kerala 690502, India", "latitude": 9.174842199999999, "longitude": 76.50133520000001, "active": true } ] }, { "name": "Tickets", "active": true, "display": "Ticket", "id": 16, "title": "wda", "description": "as", "origin": 0, "destination": 0, "fare": 0, "issueAt": null, "validFor": 2, "mediaTypeObj": { "id": 1, "mediaName": "QR based ticket", "mediaCode": "QR", "active": true }, "journeyTypeObj": { "id": 1, "typeName": "SJT", "typeCode": "Single Journey Ticket", "active": true } }, { "metroId": 1025, "mappedFares": { "id": 105, "origin": 10034, "amount": 10, "destination": 10034, "display": "Mullakkal", "metroId": 1025, "orginName": "Allepy Central Zone", "destinationName": "Allepy Central Zone" } } ] } ] }
You can give groupScale input property value as 1. By default it is 3. So 3 child nodes will be stacked vertically, fourth child node will be horizontally aligned. If you give groupScale value as 1, then all the nodes will be horizontally aligned.
Better solution which is missing from angular version is the hybrid layout. There should be an option to align the nodes horizontally to some level and after that level, all nodes should be vertically aligned.
