Gantt Chart

A Gantt chart is a type of bar chart that illustrates a project schedule. This chart lists the tasks to be performed on the vertical axis, and time intervals on the horizontal axis. The width of the horizontal bars in the graph shows the duration of each activity. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project. Terminal elements and summary elements constitute the work breakdown structure of the project. Modern Gantt charts also show the dependency (i.e., precedence network) relationships between activities.


Example Color Themes

Example Fonts



Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "y" : {
        "data" : [
          [20140221,20140521,20140821,20141121,20150221,20150521],
          [20140520,20140820,20141120,20150220,20150520,20150820]
        ],
        "smps" : ["S01","S02","S03","S04","S05","S06"],
        "vars" : ["Start","End"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "blockContrast":"true",
     "ganttEnd":"End",
     "ganttStart":"Start",
     "graphType":"Gantt",
     "theme":"CanvasXpress"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-gantt-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  blockContrast=TRUE,
  ganttEnd="End",
  ganttStart="Start",
  graphType="Gantt",
  theme="CanvasXpress"
)