Blazor Gantt Chart

Add a Gantt Chart to a Blazor App

Three steps. Start with the package:

dotnet add package Blazor-ApexGantt

Register the services in Program.cs. This step is required, not optional, and it is where the license key goes:

using Blazor_ApexGantt.Extensions;

builder.Services.AddApexGantt(options =>
{
    options.LicenseKey = "APEX-...";
});

Then add the namespaces to _Imports.razor. Note the underscores: the NuGet package is Blazor-ApexGantt but the C# namespace is Blazor_ApexGantt, because a hyphen is not legal in an identifier.

@using Blazor_ApexGantt.Components
@using Blazor_ApexGantt.Models

Nothing is copied into wwwroot and there is no script tag. Since 1.3.0 the package vendors the timeline engine and imports it itself as a static web asset.

Dependencies That Carry Their Own Semantics

The simple case stays simple: set Dependency to a task id string and you get Finish-to-Start with zero lag. When the relationship is the point, pass a TaskDependency instead.

new GanttTask
{
    Id = "qa",
    Name = "QA",
    StartTime = new DateTime(2026, 2, 20),
    EndTime = new DateTime(2026, 3, 4),
    // A plain string is Finish-to-Start with zero lag.
    // A TaskDependency spells the relationship out.
    Dependency = new TaskDependency
    {
        TaskId = "build",
        Type = DependencyType.SS,
        Lag = 3,
        LagUnit = LagUnit.Working
    }
}

DependencyType covers FS, FF, SF and SS. Lag is an integer that goes negative for lead, and LagUnit decides whether those are working days, which respects the calendar, or raw calendar days.

A milestone needs no special type. Leave EndTime off a task and it renders as a diamond on its start date, which is what the third task in the hero above is doing. Type = TaskType.Milestone is available when you want to be explicit.

Scheduling Features Are Option Flags

Critical path, baselines, the working calendar and undo history are all configuration rather than code you write:

private GanttOptions options = new()
{
    Height = "500px",
    EnableCriticalPath = true,
    CriticalBarColor = "#DC2626",
    Baseline = new BaselineOptions { Enabled = true },
    Calendar = new CalendarOptions { WorkingWeekdays = [1, 2, 3, 4, 5] },
    History = new HistoryOptions { Enabled = true }
};

GanttOptions carries over eighty typed properties in this shape, covering appearance, column configuration, sorting, grouping, filtering, the crosshair, annotations, the project boundary, assignees, task segments and summary bars.

ViewMode is gone as of 1.3.0, along with EnableToolbar. Zoom is continuous through PixelsPerDay: roughly 40 reads as a week, 12 a month and 4 a quarter, and omitting it auto-fits the data span. Code written against 1.2.0 that sets ViewMode will not compile.

Drive the Timeline at Runtime

Hold the component with @ref and the whole runtime API is available as awaitable C#, rather than something you reach through JavaScript interop yourself.

<ApexGantt @ref="gantt" Options="@options" Tasks="@tasks"
           OnTaskDragged="OnDragged"
           OnHistoryChange="OnHistory" />

@code {
    private ApexGantt? gantt;

    private async Task AddPhase()
    {
        await gantt!.AddTaskAsync(new GanttTask
        {
            Id = "rollout",
            Name = "Rollout",
            StartTime = new DateTime(2026, 3, 6),
            EndTime = new DateTime(2026, 3, 20)
        });

        await gantt.AddDependencyAsync("launch", "rollout", DependencyType.FS, lag: 0);
        await gantt.ScrollToTaskAsync("rollout");
    }

    private void OnDragged(TaskDraggedEventArgs e) => MarkDirty(e.TaskId);
    private void OnHistory(HistoryChangeEventArgs e) => (canUndo, canRedo) = (e.CanUndo, e.CanRedo);
}

There are about thirty methods: task CRUD (AddTaskAsync, UpdateTaskAsync, DeleteTaskAsync, MoveTaskAsync), dependencies, UndoAsync and RedoAsync with CanUndoAsync and CanRedoAsync, sorting, grouping, filtering, column widths and order, selection, zoom and ExportChartAsync.

Twenty events come back as typed EventCallback parameters, including OnTaskDragged, OnTaskResized, OnDependencyAdded, OnHistoryChange and OnTaskValidationError. The validation and error events matter more here than on a chart: a user dragging a task can produce a schedule your domain rules reject, and those events are where you say so.

What This Package Does Not Cover

Custom HTML tooltips. In the core, the tooltip template is a JavaScript callback that receives the task and returns markup. The wrapper serializes options as plain JSON and has no mechanism for passing a function, so the template never runs. TooltipId sets the tooltip container's element id, which is a different thing. EnableTooltip and the tooltip colours all work, so this is about templating the contents, not having tooltips at all.

.NET 8. Worth repeating because it is the constraint most likely to stop a project: this package is .NET 9 only.

The AdditionalOptions bag on GanttOptions passes unmodeled keys straight through to the engine, which covers new core options before they are modelled. It cannot carry functions, for the reason above.