Gantt2 is a library for drawing Gantt charts in a browser in SVG format. This library is the basis for the Gantt2-editor library.
npm i gantt2id: number - id of the taskname: string - name of the task[complete: number] - percentage of completion the task[color: string] - CSS color of the taskstart: string - start date of the task in YYYY-MM-DD formatduration: number - duration of the task in daystasks: ITask[] - an array of sub tasksdepend: IDependency[] - an array of dependenciesid: number - id of the tasktype: number | DependencyType - dependency typedifference: number - an offset in days from the parent taskhardness: string | HardnessType - hardness type Strong or Rubber (shown with dashes)StartStart: 1 - parent and dependant task should start togetherFinishStart: 2 - dependant task should start after parent task endsFinishFinish: 3 - parent and dependant tasks should finish togetherStartFinish: 4 - parent task should start after dependant task endsRubber - shown as a solid line with an arrowStrong - shown as a dashed line with an arrowconst data: ITask[] = [ { id: 0, name: 'do things', complete: 7, start: '2018-02-02', duration: 4, tasks: [ { id: 1, name: 'Do more things', color: '#ff6666', complete: 21, start: '2018-02-02', duration: 2, depend: [ { id: 2, type: 2, difference: 0, hardness: 'Strong' }, { id: 5, type: 2, difference: 0, hardness: 'Rubber' } ], }, { id: 2, name: 'task_2', complete: 0, color: '#8cb6ce', start: '2018-02-06', duration: 2, tasks: [ { id: 7, name: 'task_6', complete: 0, start: '2018-02-06', duration: 1, depend: [ { id: 11, type: 2, difference: 0, hardness: 'Strong' } ] }, { id: 11, name: 'task_10', complete: 0, start: '2018-02-07', duration: 1 } ] } ] }, { id: 5, name: 'task_5', complete: 0, color: '#8cb6ce', start: '2018-02-06', duration: 1, depend: [ { id: 11, type: 2, difference: 0, hardness: 'Strong' }, { id: 19, type: 2, difference: 2, hardness: 'Strong' } ] }, { id: 19, name: 'task_19', complete: 0, color: '#8cb6ce', start: '2018-02-09', duration: 1 }, { id: 21, name: 'task_21', complete: 0, start: '2018-02-05', duration: 2, depend: [ { id: 23, type: 3, difference: 0, hardness: 'Strong' } ] }, { id: 23, name: 'task_23', complete: 0, start: '2018-02-06', duration: 1 }, { id: 41, name: 'task_41', complete: 0, start: '2018-02-05', duration: 1, depend: [ { id: 42, type: 4, difference: 0, hardness: 'Strong' } ] }, { id: 42, name: 'task_42', complete: 0, start: '2018-02-02', duration: 1 }, { id: 45, name: 'task_45', complete: 0, start: '2018-02-05', duration: 1, depend: [ { id: 46, type: 1, difference: 6, hardness: 'Strong' } ] }, { id: 46, name: 'task_46', complete: 0, start: '2018-02-13', duration: 1 }, ];
import {Gantt2} from 'gantt2/prod' import {ITask} from "gantt2/prod/data/task.interface"; const elem = document.getElementById('chart'); const gantt = new Gantt2(elem as HTMLElement); gantt.init(data);
taskDefaultColor: string - default fill color for tasks (default #8cb6ce)showTaskNames: boolean - whether to show task names (default true)addTaskTitles: boolean - whether to add title elements (tooltips) to tasks (default true)taskCssClass: string - a CSS class for tasks (default gantt-task)taskDayWidth: number - width of a work day in the chart (default 50)taskHolidayWidth: number - width of a holiday or weekend in the chart (default 50)taskHeight: number - height of tasks in the chart (default 15)taskVPadding: number - vertical padding of tasks in the chart (default 8)taskStrokeWidth: number - stroke (border) width of tasks in the chart (default 1)taskStrokeColor: string - stroke color of tasks in the chart (default black)weekEnds: number[] - weekends array in JavaScript format i.e. Sunday is 0 (default [0, 6])holidays: {} - a dictionary of holidays, the format is; key - is a YYYY-MM-DD string which represents the date of the holiday and the value is the name of the holiday (default {})taskBorderRadius: number | number[] - border radius for tasks, it's either a number or an array of numbers in CSS format (default 0)showGrid: boolean - whether to show the dates grid (default true)showLegends: boolean - whether to show the legends with date numbers and months above the chart (default true)gridOpacity: number - grid opacity between 0 and 1 (default 1)gridLineColor: number - grid line color (default black)gridHolidayColor: number - grid holiday line color (default #ccc)dependencyCssClass: string - dependency CSS class (default gantt-task-dependency)dependencyOpacity: number - dependency opacity (default 1)dependencyStrokeWidth: number - dependency stroke width (default 1)dependencyArrowSize: number - size of dependency's arrow head (default 5)timelineLegendCssClass: string - timeline legend CSS class (default gantt-timeline-legend)timelineLegendHeight: number - height of timeline legend box (default 40)const elem2 = document.getElementById('chart2'); const gantt2 = new Gantt2(elem2 as HTMLElement); const config: IConfig = { gridOpacity: .3, taskBorderRadius: [5,10,10,5], taskDefaultColor: 'purple', taskHeight: 20, taskDayWidth: 60, taskVPadding: 10, taskStrokeWidth: 2 }; gantt2.init(data, config);