Author: | nextbitlabs |
---|---|
Views Total: | 2,389 views |
Official Page: | Go to website |
Last Update: | July 6, 2019 |
License: | MIT |
Preview:

Description:
A lightweight web component that helps developer dynamically render an SVG based Gantt chart to visualize tasks defined in a JavaScript object.
How to use it:
Install the gantt chart web component with NPM.
# NPM $ npm install @nextbitlabs/gantt-chart --save
Import the component.
<script type="module"> import '../dist/gantt-chart.umd.js'; </script>
Or load the umd version of the gantt chart web component from a CDN.
<script src="https://cdn.jsdelivr.net/npm/@nextbitlabs/gantt-chart@latest/dist/gantt-chart.umd.js"></script>
Create the gantt chart component with the following attributes:
<gantt-chart width="1150" height="700" margin-top="40" margin-left="40" margin-right="210" margin-bottom="160" ></gantt-chart>
Define the tasks and milestones for the gantt chart.
const data = { milestones: [ { id: 1, taskId: 6, title: 'Milestone B', date: 'April 2019' }, { id: 2, taskId: 7, title: 'Milestone A', date: 'January 2019' }, { id: 3, taskId: 11, title: 'Milestone C', date: 'September 2019' }, ], tasks: [ { id: 1, title: 'task 1', start: 0, duration: 4, class: 'c1' }, { id: 2, title: 'task 2', start: 4, duration: 3, class: 'c1' }, { id: 3, title: 'task 3', start: 5, duration: 4, class: 'c1' }, { id: 4, title: 'task 4', start: 7, duration: 2, class: 'c1' }, { id: 5, title: 'task 5', start: 8, duration: 4, class: 'c1', }, { id: 6, title: 'task 6', start: 10, duration: 4, class: 'c1', }, { id: 7, title: 'task 7', start: 0, duration: 4, class: 'c3' }, { id: 8, title: 'task 8', start: 11, duration: 5, class: 'c3', }, { id: 9, title: 'task 9', start: 14, duration: 2, class: 'c3' }, { id: 10, title: 'task 10', start: 16, duration: 5, class: 'c1' }, { id: 11, title: 'task 11', start: 21, duration: 6, class: 'c3' }, { id: 12, title: 'task 12', start: 25, duration: 2, class: 'c3' } ] };
Render the gantt chart on the app.
const element = document.querySelector('gantt-chart'); element.data = data;
Apply custom styling to the gantt chart.
gantt-chart { --font-family: 'Lato', sans-serif; --background-color: #f6f8fa; --font-size: 12px; --visibility-tick: visible; }