Google Charts - Google Charts tutorial - Gantt Charts - chart js - google graphs - google charts examples

What is Google Gantt Charts?

  • A Gantt chart is a type of chart that illustrates the breakdown of a project into its component tasks.
  • Google Gantt charts illustrate the start, end, and duration of tasks within a project, as well as any dependencies a task.
  • Google Gantt charts are rendered in the browser using SVG.
  • Similar to all Google charts, Gantt charts display tooltips when the user hovers over the data.

Learn google charts - google charts tutorial - gantt-chart-templatex - google charts examples - google charts programs


  • The google.charts.load package name is "gantt".
  • google.charts.load("current", {packages: ["gantt"]});
  • The visualization's class name is google.visualization.Gantt.
  • var chart = new google.visualization.Gantt(container);

Data policy

  • All code and data are processed and rendered in the browser. No data is sent to any server.

Sample Code

  <script type="text/javascript" src=""></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

        ['Research', 'Find sources',
         new Date(2017, 0, 2), new Date(2017, 0, 6), null,  110,  null],
        ['Write', 'Write paper',
         null, new Date(2017, 0, 10), daysToMilliseconds(3), 35, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2017, 0, 8), daysToMilliseconds(1), 30, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2017, 0, 11), daysToMilliseconds(1), 10, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2017, 0, 7), daysToMilliseconds(1), 110, 'Research']

      var options = {
        height: 175

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
  <div id="chart_div"></div>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team


Benefits of Using Gantt Charts

  • There are many good reasons to use a Gantt chart to visualize work and projects. Gantt charts:
  • Provide an at-a-glance view of project schedules, so team members and managers can stay on track.
  • Facilitate project management and collaboration.
  • Allow managers to identify past-due tasks and project delays, so they can take proactive measures.
  • Are an effective tool for communicating with team members, executives, and stakeholders, since they make it easy to visualize progress and the completion of milestones and deliverables.
  • Are a key tool in project planning, as they help managers determine the minimum time required to complete the project on schedule.
  • Show the impact of real or potential scheduling and resource changes.
  • Help you verify that your schedule is accurate and realistic.
  • Allow you to ensure the right people are assigned to the right tasks and are available when needed.

Related Searches to Google charts - Gantt Charts