{"id":14990217,"url":"https://github.com/nextbitlabs/gantt-chart","last_synced_at":"2025-04-12T02:06:15.473Z","repository":{"id":34984144,"uuid":"194256194","full_name":"nextbitlabs/gantt-chart","owner":"nextbitlabs","description":"Web component implementation of a Gantt chart.","archived":false,"fork":false,"pushed_at":"2023-01-05T09:54:02.000Z","size":865,"stargazers_count":27,"open_issues_count":11,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T02:06:08.164Z","etag":null,"topics":["chart","component","gantt","gantt-chart","plot","webcomponent"],"latest_commit_sha":null,"homepage":"https://github.com/nextbitlabs/gantt-chart","language":"JavaScript","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/nextbitlabs.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}},"created_at":"2019-06-28T10:36:15.000Z","updated_at":"2024-06-28T03:45:53.000Z","dependencies_parsed_at":"2023-01-15T11:28:57.729Z","dependency_job_id":null,"html_url":"https://github.com/nextbitlabs/gantt-chart","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fgantt-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fgantt-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fgantt-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextbitlabs%2Fgantt-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextbitlabs","download_url":"https://codeload.github.com/nextbitlabs/gantt-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505862,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["chart","component","gantt","gantt-chart","plot","webcomponent"],"created_at":"2024-09-24T14:19:43.571Z","updated_at":"2025-04-12T02:06:15.449Z","avatar_url":"https://github.com/nextbitlabs.png","language":"JavaScript","readme":"# \u0026lt;gantt-chart\u0026gt;\n\n![Latest Release](https://badgen.net/github/release/nextbitlabs/gantt-chart) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/gantt-chart)\n\nWeb component implementation of a Gantt chart.\n\n\u003cdiv align=\"center\"\u003e\n\n\n\u003cimg width=\"900px\" src=\"image.png\"\u003e\n\u003c/div\u003e\n\n## Data model\n\n```js\n{\n  milestones: [\n    {\n      id: 1,\n      taskId: 6, // Graphical hint, it may be latest task in the milestone.\n      title: 'Milestone A',\n      date: 'July 2019', // Optional.\n      additionalVerticalShift: 1 // Optional.\n    },\n    ...\n  ],\n  tasks: [\n    {\n      id: 1,\n      title: 'task 1',\n      start: 0, // Week number.\n      duration: 4, // Duration in weeks.\n      class: 'c1',\n      progress: // Optional, defaults to 0.\n    },\n    ...\n  ]\n}\n```\n\n## Exposed attributes\n\n* `width`: chart width in pixels\n* `height`: chart height in pixels\n\nMargins attributes help to ensure task and milestone titles are visible.\n\n* `margin-top`: space in pixel between the top border and the first task.\n* `margin-bottom`: space in pixel between the bottom border and the last task.\n* `margin-left`: space in pixel between the left border and the first task.\n* `margin-right`: space in pixel between the right border and the last task.\n\nSee section [Usage](#usage) for an example.\n\n## Exposed CSS Custom Properties\n\n\n* `--font-family` defaults to `sans-serif`\n* `--font-size` defaults to `12px`\n* `--background-color` defaults to `white`\n* `--visibility-ticks` defaults to `visible`, set to `hidden` to hide the week ticks\n\nUp to 10 classes can be passed:\n\n* `--c1`, the task color defaults to `purple`\n* `--c2`, the task color defaults to `blue`\n* `--c3`, the task color defaults to `gold`\n\nSee section [Usage](#usage) for an example.\n\n## Usage\n\nIn an html file\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cscript type=\"module\"\u003e\n      import 'https://unpkg.com/@nextbitlabs/gantt-chart@1.0.2/dist/gantt-chart.umd.js';\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cstyle\u003e\n    @import url('https://fonts.googleapis.com/css?family=Lato:400,700\u0026display=swap');\n    /*\n      CSS custom properties penetrate the Shadow DOM,\n      they are useful to provide custom styling.\n      The gantt-chart webcomponent exposes font-size and font-family custom properties.\n    */\n    gantt-chart {\n      --font-family: 'Lato', sans-serif;\n      --c1: lightblue;\n    }\n  \u003c/style\u003e\n  \u003cbody\u003e\n    \u003c!-- Set component attributes --\u003e\n    \u003cgantt-chart\n      width=\"1150\"\n      height=\"700\"\n      margin-top=\"40\"\n      margin-left=\"40\"\n      margin-right=\"40\"\n      margin-bottom=\"40\"\n    \u003e\u003c/gantt-chart\u003e\n  \u003c/body\u003e\n  \u003cscript\u003e\n    const element = document.querySelector('gantt-chart');\n\n    // Set gantt data: tasks and milestones.\n    element.data = {\n      milestones: [\n        {\n          id: 1,\n          taskId: 1,\n          title: 'Milestone A'\n        },\n      ],\n      tasks: [\n        {\n          id: 1,\n          title: 'task 1',\n          start: 0,\n          duration: 4,\n          class: 'c1',\n          progress: 0.65\n        },\n      ]\n    };\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\nWith npm:\n\n```sh\nnpm i @nextbitlabs/gantt-chart\n```\n\nSee [demo](https://stackblitz.com/edit/gantt-chart-example).\n\n## Development\n\nInstall dependencies with\n\n```sh\nnpm install\n```\n\nUpdate build on changes with\n\n```sh\nnpm run dev\n```\n\nand see updates on `./demo/index.html` running a local server from `./`.\n\n## Release\n\n```sh\nnpm run release\n```\n\n## License\n\nThis project is licensed under the MIT License. See the [license](license) file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextbitlabs%2Fgantt-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextbitlabs%2Fgantt-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextbitlabs%2Fgantt-chart/lists"}