Gantt
TsgcHTMLComponent_Gantt — render a Gantt project-timeline chart with coloured task bars and progress fills, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_Gantt — render a Gantt project-timeline chart with coloured task bars and progress fills, in Delphi, C++ Builder and .NET.
Add tasks with start and end dates and a progress percentage, set a heading, then read the HTML property — the component scales every bar across the project range.
TsgcHTMLComponent_Gantt
Bootstrap 5 card with task bars + scoped CSS
Delphi, C++ Builder, .NET
Set a Title, call AddTask for each work item with its dates, progress and colour, then read HTML.
uses
sgcHTML_Enums, sgcHTML_Component_Gantt;
var
oGantt: TsgcHTMLComponent_Gantt;
begin
oGantt := TsgcHTMLComponent_Gantt.Create(nil);
try
oGantt.Title := 'Release Plan';
oGantt.AddTask('Design', EncodeDate(2026, 6, 1),
EncodeDate(2026, 6, 7), 100, hcPrimary, 'Ana');
oGantt.AddTask('Build', EncodeDate(2026, 6, 8),
EncodeDate(2026, 6, 20), 45, hcSuccess, 'Tom');
WebModule.Response := oGantt.HTML; // card + task bars + CSS
finally
oGantt.Free;
end;
end;// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Gantt.hpp
TsgcHTMLComponent_Gantt *oGantt = new TsgcHTMLComponent_Gantt(NULL);
try
{
oGantt->Title = "Release Plan";
oGantt->AddTask("Design", EncodeDate(2026, 6, 1),
EncodeDate(2026, 6, 7), 100, hcPrimary, "Ana");
oGantt->AddTask("Build", EncodeDate(2026, 6, 8),
EncodeDate(2026, 6, 20), 45, hcSuccess, "Tom");
String html = oGantt->HTML; // card + task bars + CSS
}
__finally
{
delete oGantt;
}using esegece.sgcWebSockets;
var gantt = new TsgcHTMLComponent_Gantt();
gantt.Title = "Release Plan";
gantt.AddTask("Design", new DateTime(2026, 6, 1),
new DateTime(2026, 6, 7), 100, TsgcHTMLColor.hcPrimary, "Ana");
gantt.AddTask("Build", new DateTime(2026, 6, 8),
new DateTime(2026, 6, 20), 45, TsgcHTMLColor.hcSuccess, "Tom");
string html = gantt.HTML; // card + task bars + CSSThe members you reach for most often.
Tasks holds work items with Title, StartDate, EndDate, Progress, enum Color and Assignee.
AddTask(aTitle, aStart, aEnd, aProgress, aColor, aAssignee) appends one bar in a single call.
The component finds the earliest start and latest end across all tasks and positions every bar proportionally across that range.
Each task's Progress (0–100) draws a translucent fill over its bar so completion is visible at a glance.
Title renders a bold heading above the chart; leave it blank to drop the heading row.
GanttID identifies the card; HTML returns the card, task rows and the scoped Gantt CSS.