Gantt Chart with Legend | #O0Od5hwG

HTMLcopy

 
<div id='container'></div>

CSScopy

​x
 
html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
​
.anychart-tooltip {
  padding: 0;
  background: white;
  color: #333;
  box-shadow: 2px 2px 5px #333;
  border-radius: 0;
}
​
.anychart-tooltip-title h5 {
  background: #455a64;
  padding: 10px 30px;
  margin: 0;
}
​
.anychart-tooltip-title h5.default {
  color: #fff;
}
​
.anychart-tooltip hr {
  margin: 0;
}
​
.anychart-tooltip .tooltip-content {
  padding: 0 30px;
}

JavaScriptAutocompletecopy

 
anychart.onDocumentReady(function () {
​
  // Create a project gantt chart
  var chart = anychart.ganttProject();
  
  // Create a data tree from the dataset created from line 133
  var treeData = anychart.data.tree(data, 'as-tree');
  // Load it to the chart
  chart.data(treeData);
​
  // Customize the chart's data grid:
  // get the data grid
  var dataGrid = chart.dataGrid();
  // enable html in the data grid's tooltips
  dataGrid.tooltip().useHtml(true);
  // set the task name column's width
  dataGrid.column(1).width(250);
​
  // Set the line splitting the data grid and the timeline
  chart.splitterPosition(303);
​
  // Get the chart's timeline
  var timeline = chart.getTimeline();
​
  // Get the chart's milestones
  var milestones = timeline.milestones();
​
  // Some milestones are formatted in the data using the 'milestone' property.
  // Set the milestone format for all other milestones
  milestones
    .markerType('square')
    .fill('#96a6a6')
    .stroke('#333');
​
  // Customize the default tooltip:
  timeline.tooltip()
    // enable html
    .useHtml(true)
    // format the tooltip title
    .titleFormat(function () {
      return '<h5 class="title default">' + this.name + '</h5>';
    })
    // format the tooltip content
    .format(function () {
      return (
        '<div class="tooltip-content">\n' +
        '<p><b>Start date</b>: ' +
        anychart.format.date(this.actualStart) + '</p>\n' +
        '<p><b>End date</b>: ' +
        anychart.format.date(this.actualEnd) + '</p>\n' + '</div>'
      );
    });
​
  // Customize the milestone tooltip:
  milestones.tooltip()
    // enable html
    .useHtml(true)
    // format the tooltip title
    .titleFormat(function () {
      var bgcolor = this.getData('milestone')
        ? this.getData('milestone').fill: '#96a6a6';
      return (
        '<h5 class="title" style="background: ' + bgcolor + '">' +
        this.name + '</h5>'
      );
    })
    // format the tooltip content
    .format(function () {
      return (
        '<div class="tooltip-content"><p><b>Date</b>: ' +
        anychart.format.date(this.actualStart) + '</p></div>'
      );
    });
  
  // Preview milestones on their parent tasks
  milestones.preview().enabled(true);
  
  // Highlight holidays:
  // get the timeline calendar
  var calendar = timeline.scale().calendar();
  // set the holidays
  calendar.holidays([{day: 4, month: 6, label: 'Independence Day'}]);
  // customize the holiday and weekend fill
  timeline.holidaysFill('green 0.2').weekendsFill('red 0.2');
  
  // Set the chart's initial zoom
  chart.zoomTo(Date.UTC(2024, 6, 1, 0), Date.UTC(2024, 6, 16, 0));
​
  // Render the chart within a specified container
  chart.container('container').draw();
​
  // Collapse all elements except for the first root task
  chart.collapseAll().expandTask('1');
​
  // Add a legend:
  chart.legend()
    // enable the legend
    .enabled(true)
    // set the legend's items
    .items([
      {
        text: 'Meetings',
        iconFill: '#64b5f6',
        iconType: 'pentagon'
      },
      {
        text: 'Reviews',
        iconFill: '#ffd54f',
        iconType: 'diamond'
      },
      {
        text: 'Publishing',
        iconFill: '#00bfa5',
        iconType: 'star5'
      },
      {
        text: 'Other',
        iconFill: '#96a6a6',
        iconType: 'square'
      }
    ]);
  
});
​
// Create data
var data = [
  {
    id: '1',
    name: 'Digital Marketing Campaign',
    actualStart: '2024-07-01',
    actualEnd: '2024-08-03',
    children: [
      {
        id: '1.1',
        name: 'Planning',
        actualStart: '2024-07-01',
        actualEnd: '2024-07-06',
        children: [
          {
            id: '1.1.1',
            name: 'Write campaign brief',
            actualStart: '2024-07-01',
            actualEnd: '2024-07-03'
          },
          {
            id: '1.1.2',
            name: 'Team kickoff',
            actualStart: '2024-07-05',
            actualEnd: '2024-07-05',
            milestone: {
              enabled: true,
              markerType: 'pentagon',
              fill: '#64b5f6',
              stroke: '#666'
            }
          },
          {
            id: '1.1.3',
            name: 'Creative brainstorm',
            actualStart: '2024-07-06',
            milestone: {
              enabled: true,
              markerType: 'pentagon',
              fill: '#64b5f6',
              stroke: '#666'
            }
          }
        ]
      },
      {
        id: '1.2',
        name: 'Content',
        actualStart: '2024-07-07',
        actualEnd: '2024-07-11',
        children: [
          {
            id: '1.2.1',
            name: 'Write content',
            actualStart: '2024-07-07',
            actualEnd: '2024-07-10'
          },
          {
            id: '1.2.2',
            name: 'Review content',
            actualStart: '2024-07-11',
            milestone: {
              enabled: true,
              markerType: 'diamond',
              fill: '#ffd54f',
              stroke: '#666'
            }
          }
        ]
      },
      {
        id: '1.3',
        name: 'Design',
        actualStart: '2024-07-10',
        actualEnd: '2024-07-14',
        children: [
          {
            id: '1.3.1',
            name: 'Design campaign graphics',
            actualStart: '2024-07-10',
            actualEnd: '2024-07-13'
          },
          {
            id: '1.3.2',
            name: 'Review graphics',
            actualStart: '2024-07-14',
            milestone: {
              enabled: true,
              markerType: 'diamond',
              fill: '#ffd54f',
              stroke: '#666'
            }
          }
        ]
      },
      {
        id: '1.4',
        name: 'Marketing Channels',
        actualStart: '2024-07-10',
        actualEnd: '2024-07-16',
        children: [
          {
            id: '1.4.1',
            name: 'Website',
            actualStart: '2024-07-10',
            actualEnd: '2024-07-15',
            children: [
              {
                id: '1.4.1.1',
                name: 'Build landing page',
                actualStart: '2024-07-10',
                actualEnd: '2024-07-13'
              },
              {
                id: '1.4.1.2',
                name: 'Review landing page',
                actualStart: '2024-07-14',
                milestone: {
                  enabled: true,
                  markerType: 'diamond',
                  fill: '#ffd54f',
                  stroke: '#666'
                }
              },
              {
                id: '1.4.1.3',
                name: 'Launch page',
                actualStart: '2024-07-15',
                milestone: {
                  enabled: true,
                  markerType: 'star5',
                  fill: '#00bfa5',
                  stroke: '#666'
                }
              }
            ]
          },
          {
            id: '1.4.2',
            name: 'Email',
            actualStart: '2024-07-12',
            actualEnd: '2024-07-16',
            children: [
              {
                id: '1.4.2.1',
                name: 'Build emails',
                actualStart: '2024-07-12',
                actualEnd: '2024-07-14'
              },
              {
                id: '1.4.2.2',
                name: 'Test emails',
                actualStart: '2024-07-15T12:00',
                milestone: {
                  enabled: true,
                  markerType: 'diamond',
                  fill: '#ffd54f',
                  stroke: '#666'
                }
              },
              {
                id: '1.4.2.3',
                name: 'Schedule emails',
                actualStart: '2024-07-16',
                milestone: {
                  enabled: true,
                  markerType: 'star5',
                  fill: '#00bfa5',
                  stroke: '#666'
                }
              }
            ]
          },
          {
            id: '1.4.3',
            name: 'Social Media',
            actualStart: '2024-07-12',
            actualEnd: '2024-07-16',
            children: [
              {
                id: '1.4.3.1',
                name: 'Create social posts',
                actualStart: '2024-07-12',
                actualEnd: '2024-07-15'
              },
              {
                id: '1.4.3.2',
                name: 'Schedule social posts',
                actualStart: '2024-07-16',
                milestone: {
                  enabled: true,
                  markerType: 'star5',
                  fill: '#00bfa5',
                  stroke: '#666'
                }
              }
            ]
          },
          {
            id: '1.4.4',
            name: 'Advertising',
            actualStart: '2024-07-12',
            actualEnd: '2024-07-16',
            children: [
              {
                id: '1.4.4.1',
                name: 'Set up ads',
                actualStart: '2024-07-12',
                actualEnd: '2024-07-16'
              }
            ]
          }
        ]
      },
      {
        id: '1.5',
        name: 'Campaign Live Dates',
        actualStart: '2024-07-17',
        actualEnd: '2024-07-31',
        children: [
          {
            id: '1.5.1',
            name: 'Campaign live',
            actualStart: '2024-07-17'
          },
          {
            id: '1.5.2',
            name: 'End of campaign',
            actualStart: '2024-07-31'
          }
        ]
      },
      {
        id: '1.6',
        name: 'Reporting',
        actualStart: '2024-07-17',
        actualEnd: '2024-08-03',
        children: [
          {
            id: '1.6.1',
            name: 'Track & analyze campaign results',
            actualStart: '2024-07-17',
            actualEnd: '2024-08-02'
          },
          {
            id: '1.6.2',
            name: 'Retrospective meeting',
            actualStart: '2024-08-03',
            milestone: {
              enabled: true,
              markerType: 'pentagon',
              fill: '#64b5f6',
              stroke: '#666'
            }
          }
        ]
      }
    ]
  }
];

Sample meta

AnyChart Documentation