{"id":20067619,"url":"https://github.com/chandumaram/org-chart","last_synced_at":"2026-04-07T23:31:47.072Z","repository":{"id":50441215,"uuid":"514848197","full_name":"chandumaram/org-chart","owner":"chandumaram","description":"Hierarchical Organization Chart for Angular created using npm package cm-angular-org-chart","archived":false,"fork":false,"pushed_at":"2025-03-21T14:15:02.000Z","size":1170,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T08:12:27.182Z","etag":null,"topics":["angular","angular16","cm-angular-org-chart","html5","javascript","org-chart","organization-chart","scss","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/cm-angular-org-chart","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chandumaram.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-17T13:15:39.000Z","updated_at":"2025-06-23T21:50:53.000Z","dependencies_parsed_at":"2024-03-21T10:22:19.361Z","dependency_job_id":"456e8fe3-16bb-4382-8c21-e0cbd4eadef6","html_url":"https://github.com/chandumaram/org-chart","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"61fd7750c444fe620d64787d015fd636b2330209"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chandumaram/org-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chandumaram%2Forg-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chandumaram%2Forg-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chandumaram%2Forg-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chandumaram%2Forg-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chandumaram","download_url":"https://codeload.github.com/chandumaram/org-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chandumaram%2Forg-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31533823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular16","cm-angular-org-chart","html5","javascript","org-chart","organization-chart","scss","typescript"],"created_at":"2024-11-13T14:02:39.839Z","updated_at":"2026-04-07T23:31:47.045Z","avatar_url":"https://github.com/chandumaram.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## CM-ANGULAR-ORG-CHART UI\n\n# Hierarchical Organization Chart for Angular v14, v15 and v16 versions\n\nThe `cm-angular-org-chart` component displays heirarchal Organizational Chart.\n\nPlease install latest version for Error free.\n\n![Org Chart](https://github.com/chandumaram/org-chart/blob/master/src/assets/org-chart-vertical.png)\n\n## Table of Contents\n\n * [Version](#Version)\n * [Usage](#usage)\n * [Inputs](#inputs)\n * [Outputs](#outputs)\n * [Default Look](#default-look)\n * [Custom Styling](#custom-styling)\n\n\n## Version\n\n| Angular | cm-angular-org-chart |\n|---|---|\n|`16`|`3.0.0`|\n|`15`|`2.0.0`|\n|`14`|`1.1.3`|\n\n\n## Usage\n\nEach employee is represented by an object with the following properties. Note that all the properties are optional.\n\n| Property | Type| Description |\n|---|---|---|\n|`name`|`string`| The name of the employee |\n|`cssClass`|`string`| The CSS class to apply to the employee block|\n|`imageUrl`|`string`| URL to the employee's image\n|`designation`|`string`| Employee's designation\n|`subordinates`|`Employee[]`| An array of subordinate employees\n\n### Installation\n\n```sh\n$ npm i cm-angular-org-chart\n```\n\n### `app.module.ts`\n```js\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { CmAngularOrgChartModule } from 'cm-angular-org-chart';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    CmAngularOrgChartModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### `app.component.html`:\n```html\n  \u003corg-chart [topEmployee]=\"topEmployee\" direction=\"vertical\"\u003e\u003c/org-chart\u003e\n```\n\n### `app.component.ts`:\n```js\nexport class AppComponent {\n  employeeImage = \"assets/employee.png\";\n  topEmployee: any = {\n    name: 'Sundar Pichai',\n    cssClass: 'oc-superSenior',\n    imageUrl: this.employeeImage,\n    designation: 'Chief Executive Officer',\n    subordinates: [\n      {\n        name: 'Thomas Kurian',\n        cssClass: 'oc-senior',\n        imageUrl: this.employeeImage,\n        designation: 'CEO, Google Cloud',\n      },\n      {\n        name: 'Susan Wojcicki',\n        cssClass: 'oc-senior',\n        imageUrl: this.employeeImage,\n        designation: 'CEO, YouTube',\n        subordinates: [\n          {\n            name: 'Beau Avril',\n            cssClass: 'oc-me',\n            imageUrl: this.employeeImage,\n            designation: 'Global Head of Business Operations',\n            subordinates: []\n          },\n          {\n            name: 'Tara Walpert Levy',\n            cssClass: 'oc-me',\n            imageUrl: this.employeeImage,\n            designation: 'VP, Agency and Brand Solutions',\n            subordinates: [\n              {\n                name: 'Junior 1 David',\n                cssClass: 'oc-junior',\n                imageUrl: this.employeeImage,\n                designation: 'CEO, Google Health',\n                subordinates: []\n              },\n              {\n                name: 'Junior 2 David',\n                cssClass: 'oc-junior',\n                imageUrl: this.employeeImage,\n                designation: 'CEO, Google Health',\n                subordinates: [\n                  {\n                    name: 'superJunior 1 David',\n                    cssClass: 'oc-superJunior',\n                    imageUrl: this.employeeImage,\n                    designation: 'CEO, Google Health',\n                    subordinates: []\n                  },\n                  {\n                    name: 'superJunior 2 David',\n                    cssClass: 'oc-superJunior',\n                    imageUrl: this.employeeImage,\n                    designation: 'CEO, Google Health',\n                    subordinates: []\n                  }\n                ]\n              }\n            ]\n          },\n        ]\n      },\n      {\n        name: 'Jeff Dean',\n        cssClass: 'oc-senior',\n        imageUrl: this.employeeImage,\n        designation: 'Head of Artificial Intelligence',\n        subordinates: [\n          {\n            name: 'David Feinberg (You)',\n            cssClass: 'oc-me',\n            imageUrl: this.employeeImage,\n            designation: 'CEO, Google Health',\n            subordinates: []\n          }\n        ]\n      }\n    ]\n  };\n}\n```\n\n\n## Inputs\n\n| Name | Type | Description\n|---|---|---|\n|`topEmployee`| `Employee` object| The `Employe` object mentioned above\n|`direction`| `vertical` or `horizontal` | Renders chart vertically or horizontally\n\n\n## Outputs\n\n|Name |Parameters | Description\n|---|---|---|\n|`itemClick`|`Employee`| The `Employee` object which was clicked\n\nEx:   \u003corg-chart [topEmployee]=\"topEmployee\" direction=\"vertical\" (itemClick)=\"onClickItem($event)\"\u003e\u003c/org-chart\u003e\n\n\n## Default Look\n\n### Horizontal\n\n![Horizontal Chart](https://github.com/chandumaram/org-chart/blob/master/src/assets/org-chart-horizontal.png)\n\n### Vertical\n\n![Vertical Chart](https://github.com/chandumaram/org-chart/blob/master/src/assets/org-chart-vertical.png)\n\n\n## Custom Styling\nYou can override default styles with your custom SCSS. Make sure you include your custom SCSS *after* including the default SCSS so that your styles override the default styles.\n\n```scss\n.oc-name {\n  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n}\n\n.oc-designation {\n  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;\n}\n\n.oc-border {\n  border-color: #9E9E9E;\n}\n\n.oc-box {\n  color: white;\n  width: 10em;\n}\n\n// Custom cssClass from Employee object\n.oc-superSenior {\n\tbackground-color: midnightblue;\n}\n\n.oc-senior {\n\tbackground-color: brown;\n}\n\n.oc-me {\n\tbackground-color: darkgreen;\n}\n\n.oc-junior {\n\tbackground-color: darkgoldenrod;\n}\n\n.oc-superJunior {\n\tbackground-color: purple;\n    }\n```\n\n## License\nMIT\n\n## Author\n- Maram Chandrasekhar Reddy [@chandumaram](https://github.com/chandumaram)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchandumaram%2Forg-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchandumaram%2Forg-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchandumaram%2Forg-chart/lists"}