Skip to main content

Gantt Charts

JavaScript Chart Types

Gantt Charts

JavaScript Gantt charts offer project management and planning with tasks on the y-axis and time scale on the x-axis. The length of the task bars define the new task duration between the start date and end date. Tooltips show exact time period elapsed and support HTML and CSS formatting. Gantt chart data is easily loaded from JSON or your database and there are many high performance open source samples (including Angular, Vue, PHP and pure JavaScript) to get you up and running quickly without the need for custom styling or plugins. The Gantt component is rendered with SVG and HTML5 and fully cross browser compatible. Advanced Gantt chart component user interface elements include auto scheduling, Gantt dependencies, milestones, and grid label columns.

Axis Markers Gantt Chart

Gantt chart with axis markers.

Edit
Gantt chart with thin bars and dependency lines.
Dynamically sets icons in gantt data point labels indicating task completion.
Uses labels with images of assigned person for each task.
Gantt chart with full rounded bars and column complete value without a hatch pattern.
Uses axis grid lines drawn on top of data points to segment Gantt bars into day parts.
Simple Gantt chart with % complete values.
Advanced Gantt chart with descriptive axis tick label columns.
Advanced Gantt chart percent complete.
Advanced Gantt chart with descriptive axis tick label columns and gantt dependencies for critical path analysis.
Advanced Gantt chart with slack time, markers, and milestones.
Gantt chart master detail Summary.
A gantt timeline chart with multiple axes.
Milestone trend analysis using dual time axes.
Circular gantt chart with a custom legend.
Nested circular gantt chart with a custom legend.
Gantt data on a linear gauge.