How to: Create a Gantt Chart with Task Links

Dec 06, 2022
5 minutes to read

The following example demonstrates how to create a Gantt chart at design time, add activity dependencies and a progress line, and improve the chart appearance. To display planned task durations and completions, add two sets of data to the chart, i.e. two different series of the Gantt type. The reason is that, for now, XtraCharts can’t automatically calculate the degree of task completion, so one series is used to represent tasks, and another series is used to represent their degree of completion.

This document consists of the following sections.

Steps 1-6. Creating a New Chart and Adding Data
Steps 7-8. Adding Relations and a Progress Line
Steps 9-12. Customizing the Appearance
Result

Steps 1-6. Creating a New Chart and Adding Data

Start MS Visual Studio and create a new Windows Forms Application , or open an existing one.
Drop the ChartControl onto the form. Note that in this instance the Chart Wizard may be invoked (in case its “Show wizard every time a new chart is added” option is enabled). In this example, we don’t need to use the wizard, so click Cancel to close the wizard’s window and manually customize the ChartControl.
To add a new series to the chart, select the ChartControl, open its smart tag and choose the Series… item in the tasks list. Then, the Series Collection Editor will be invoked.
Then, a dialog appears that allows you to add a new series to a chart, and maintain their properties. Click Add… and select the Gantt series view from the list.
Click Copy to create the similar series.
Add data points to series by filling in the grid at the Points tab of the Series Collection Editor , as shown in the following image.

Steps 7-8. Adding Relations and a Progress Line

In this step we will add activity dependencies (also called “task links” or “relations”). They will show the task order and indicate (in our instance) that an activity should not begin until the previous one is finished.
A constant line will act as a progress line of a Gantt chart. Select the horizontal AxisY (date-time axis in this instance), Then, in the Property window, locate the Axis2D.ConstantLines property and click the ellipsis button opposite the property. and invoke the Constant Line Collection Editor. In the invoked Constant Line Collection Editor , click Add to add an item and set its ChartElementNamed.Name to Progress and ConstantLine.AxisValue - to 10/10/2008.

Steps 9-12. Customizing the Appearance

Now the chart is ready, but it seems clogged, and it’s difficult to distinguish between data labels and axis marks. To improve its appearance, do the following:

Hide the chart legend, since it’s not very informative. Select it and set its LegendBase.Visibility property to False.
Select the date-time axis (AxisY). Change its AxisLabel.TextPattern to {V: MMMM dd} ,DateTimeScaleOptions.GridAlignment to Day , ScaleGridOptionsBase.GridSpacing of AxisBase.DateTimeScaleOptions - to 10 (that means one tick mark equals ten days).
Hide the data series labels - set the SeriesBase.LabelsVisibility property to False for each data series.
You can also change the bar’s width so two overlapping series would be clearly visible (BarSeriesView.BarWidth of SeriesBase.View = 0.5 and 0.3 ), and adjust the arrowhead dimensions (following properties of the GanttSeriesView.LinkOptions: TaskLinkOptions.ArrowHeight = 11 , TaskLinkOptions.ArrowWidth = 9 ).

Result

The resulting chart is shown in the following image.