Skip to main content

Gantt Charts

JavaScript Chart Types

  1. Home
  2. JavaScript Chart Types
  3. Gantt Charts

Gantt Charts

Back To Categories

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. JS Gantt charts are now available as part of the JSCharting Bundle or separately with the Gantt Chart Bundle Download or Purchase.

Axis Markers Gantt Chart

Gantt chart with axis markers.

Edit
Gantt Chart Stages
Gantt chart with thin bars and dependency lines.
NewPoint Marker Gantt Chart
Uses point diamond markers on top of bars to simulate an arrow-like shape.
Gantt Chart Heatmap
A Gantt heatmap chart encoding hours spent each day as a color.
Gantt Chart Icons
Dynamically sets icons in gantt data point labels indicating task completion.
Gantt Chart Images
Uses labels with images of assigned person for each task.
Gantt Chart Rounded
Gantt chart with full rounded bars and column complete value without a hatch pattern.
Gantt Point Segments
Uses axis grid lines drawn on top of data points to segment Gantt bars into day parts.
Percent Complete Gantt Chart
Simple Gantt chart with % complete values.
Gantt Axis Details Chart
Advanced Gantt chart with descriptive axis tick label columns.
Calendar Pattern Gantt Chart
A Gantt chart with weekend axis markers using calendar patterns.
Complex Gantt Chart
Advanced Gantt chart percent complete.
NewGantt Dependency Line Styling Chart
Gantt chart with large dependency line radii and dash styling.
Critical Path Gantt Chart
Toggle visibility of a critical dependency path highlighting.
Dependencies Gantt Chart
Advanced Gantt chart with descriptive axis tick label columns and gantt dependencies for critical path analysis.
Dependency Highlighting Gantt Chart
Advanced Gantt chart with descriptive axis tick label columns and gantt dependencies for critical path analysis.
Dynamic Label Outline Color Gantt Chart
Gantt chart point labels using a dynamic label outline color.
NewGantt Complete Heatmap Chart
Create a Gantt heatmap with points for each day using point.complete indicating the number of hours worked for that day.
Linear Bar Gauge Gantt Chart
Gantt chart created using linear bar gauge chart type.
Gantt Milestone Chart
Advanced Gantt chart with slack time, markers, and milestones.
NewProgress Line Overlay Gantt Chart
Dynamically generate a progress line overlay for a Gantt chart.
NewProgress Line Stacked Gantt Chart
Dynamically generate a progress line to use with a gantt chart on multiple Y axes of different types and orientations.
NewScrollable Gantt HTML Chart
Gantt chart that uses HTML to create a scrollable chart area.
Gantt Summary Chart
Gantt chart master detail Summary.
Gantt Timeline
A gantt timeline chart with multiple axes.
Milestone Trends Chart
Milestone trend analysis using dual time axes.
Circular Gantt Chart
Circular gantt chart with a custom legend.
Circular Nested Gantt Chart
Nested circular gantt chart with a custom legend.
Linear Gantt Gauge Chart
Gantt data on a linear gauge.

See also Gantt Chart Tutorial