The end users can drag and drop task bars, draw dependency lines of all types, and edit task data directly within an associated grid. With developer's support, they can also get estimation task dates, auto-calculated WBS values, and cost fields, as needed. DlhSoft Gantt chart components can really do anything related to a timeline, directly in the client side's browser. All without requiring any third party packages whatsoever!
Interactive Gantt chart and scheduling components with built-in project management features, ready for the development framework of your choice
COMPONENTS
for HTML5 and JavaScript® with optional TypeScript support and Angular, React & Vue extensions
built with inline SVG support of HTML5
– build 5.3.20
GanttChartView
Hierarchical data grid and attached scheduling chart with drag and drop support and dependency lines.
ScheduleChartView
Scheduling chart that displays multiple bars on the same line with horizontal and vertical drag and drop support.
LoadChartView
Allocation chart displaying normal and over-allocations of one or more resources on a timeline with optional data grid and Gantt Chart integration.
PertChartView
PERT diagram displaying events and their dependencies with drag and drop based rearranging support and optional Gantt Chart integration.
NetworkDiagramView
Network diagram displaying task information and dependencies with drag and drop based rearranging support and optional Gantt Chart integration.
More
Miscellaneous controls to be used in conjunction with main components of the Gantt Chart library: month calendar (Calendar), date and time editors (DatePicker, TimePicker, DateTimePicker), and combo box with check boxes (MultiSelectorComboBox).
Check it out live directly in your browser
... and/or get the package now, e.g. with npm, and test it on your side:
npm install @dlhsoft/ganttcharthyperlibrary
-
Editing, drag and drop, dependencies
-
Resources, project management features
The Gantt chart components allow end users to add resource allocations (people or materials). Also, with optional auto-scheduling, critical item highlighting, resource leveling, baseline bars, and task splitting, these components were all built with full project management support in mind.
-
High performance, customizability
User interface virtualization and asynchronous behaviors are enabled by default and by design, getting the components responsive in less than 3 seconds when loading as much as 10,000 items on modern PCs. Customizable grid columns, summarized work breakdown structure, beautiful and interactive chart with draggable bars and dependency lines, copy-paste, filtering rows, detailed item change events. With full Typescript 2.0+ support.
-
Printing, exporting images, Microsoft Project, and Excel®
Call Print method to initiate printing (or PDF exporting). Export HTML documents, and server side PNG images using GanttChartExporter component*. Enable saving and loading Microsoft Project XML content by leveraging ProjectSerlializer. Use Adapter API (free for product licensees; requires .NET server) to save and load data from Excel® sheets, too.
-
Mobile devices, touch support
End users can drag and drop task bars and update completion values with their fingers on touch-enabled devices. And they can also create dependencies between tasks, expand and collapse nodes, and change the grid-chart splitter position using similar, intuitive, gestures. In the grid area end users can further edit task names, dates, select assigned resources from a drop down list, and so on, directly from their phones, for example.
Customizable appearance
-
Customize bars, dependency lines, task rows, and much more
You may change colors and miscellaneous style settings of the output HTML and SVG elements either generally or for individual data items, and write template overriding functions to generate custom interface for standard, milestone, and summary tasks, and/or for dependency lines, as needed. And you can also add support for storing and displaying bar interruptions, too.
-
Chart headers/scales
The components come with configurable timeline duration and zoom level, and customizable intervals of visible week day and hour intervals. Scale headers support multiple types of built-in and custom intervals and texts, date formatters, and you can even configure the update interval that would apply to round up times upon dragging task bars.
-
Grid cell editors, bar extras
Use either built in or custom grid cell template and conversion functions, including but not limited to date and date-time formatting and picking behaviors. Users can edit assigned resources of each task using specially designed multi-select combo box, from the inline grid, too. The side screenshot shows task bar labels and custom resource icons displayed to the right of task bars instead of the default assignment names.
-
Non-working days, holidays, task parts
Besides configurable week day intervals to be applied upon scheduling tasks (possible different for specific tasks), the components come with support for special days such as vacations and holidays (possibly different for individual items, too). Any item can either have a single bar to be shown on its row, or an array of "parts" indicating a set of bars to be presented instead. Each bar can be individually set up by the developer and dragged around by the user, having the same API as hierarchical item (excepting the grid cells.)
-
Dragging and dropping, adding dependencies
Based on project data you can also generate charts displaying items assigned to each resource on a separate row and allow dragging the bars vertically (from their bottom area) to change the assignments (or use custom code to allow dragging them between components.). Dependencies between tasks can be added as well when the developer sets the component up to accept it.
-
Grid columns, resource hierarchy
Within a ScheduleChartView component, resources can be displayed in groups (of unlimited indentation levels) as well. With full expanding and collapsing support, of course.
-
Print, exporting
Call Print method to initiate printing (or PDF exporting). Export HTML documents, and server side PNG images using GanttChartExporter component*.
-
Schedule (really) anything
And if you set up custom headers to display specific intervals, you can easily present anything that can be scheduled. Work shifts (night-morning-afternoon) presented below are just one example out of an infinity!
Load Charts, PERT Charts, Network Diagrams
You can easily generate other types of diagrams based on Gantt Chart items (or by defining data on the fly).
JavaScript based, and with TypeScript definitions, too, of course.
Pricing
Multiple license types with different pricing options are available: there is one for everyone!
Mini Edition
Personal License
€429
Order license
- Gantt Chart component only
- for a single developer
- royalty-free perpetuum license
- with unlimited support
Basic Edition
Small Team License
€848
Order license
- Gantt Chart and Schedule Chart
- for a team of up to 3 developers
- royalty-free perpetuum license
- with unlimited support
Standard Edition
Personal Plus License
€2882
Order license
- All components with source code
- for a single developer
- royalty-free perpetuum license
- with unlimited support