Charts

TwGanttChart

TwGanttChart is a Blazor Gantt chart: a horizontal bar per task from its start date to its end date, showing a schedule and overlaps.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwGanttChart draws a bar per ChartTask from its start date to its end date, in the order given, so the schedule and any overlaps are visible.

Release plan

RAZOR

<TwChart Title="Release plan">
    <TwGanttChart Tasks="@_tasks" />
</TwChart>

CSHARP

@code {
    private readonly ChartTask[] _tasks =
    [
        new("Research", new DateTime(2026, 1, 5, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 1, 23, 0, 0, 0, DateTimeKind.Local)),
        new("Design", new DateTime(2026, 1, 19, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 2, 13, 0, 0, 0, DateTimeKind.Local)),
        new("Build", new DateTime(2026, 2, 9, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 3, 20, 0, 0, 0, DateTimeKind.Local)),
        new("Test", new DateTime(2026, 3, 9, 0, 0, 0, DateTimeKind.Local), new DateTime(2026, 3, 31, 0, 0, 0, DateTimeKind.Local))
    ];
}

Date format

DateFormat takes any .NET date format string and applies to the axis, tooltips and table view.

Release plan

RAZOR

<TwChart Title="Release plan">
    <TwGanttChart Tasks="@_tasks" DateFormat="MMM yyyy" />
</TwChart>

Labels

StartLabel, EndLabel and LabelHeader rename the values in tooltips and the table view.

Release plan

RAZOR

<TwChart Title="Release plan">
    <TwGanttChart Tasks="@_tasks" StartLabel="Begins" EndLabel="Due" LabelHeader="Phase" Height="ChartHeight.Small" />
</TwChart>

Summary

Tooltips and the table view give the start and end of each task.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwGanttChart

Basic usage

Date format

Labels

Summary

Shared features

Keyboard navigation