A comprehensive Blazor wrapper library for ApexGantt, enabling developers to create interactive Gantt charts and project timeline visualizations in Blazor applications with full C# integration.
- 📊 Interactive Gantt Charts - Create beautiful, interactive timeline visualizations
- 🎯 Type-Safe API - Full C# models with IntelliSense support
- 🔄 Task Dependencies - Visual dependency arrows between related tasks
- ✏️ Interactive Editing - Drag, resize, and edit tasks directly in the chart
- 🎨 Customizable Styling - Full control over colors, sizes, and visual appearance
- 📱 Responsive Design - Automatic width calculation for any container size
- 🔧 Blazor WebAssembly & Server - Works with both hosting models
- 🚀 Modern .NET - Built on .NET 9.0 with nullable reference types
dotnet add package Blazor-ApexGantt- Clone the repository:
git clone https://github.com/apexcharts/Blazor-ApexGantt.git- Add a project reference to your Blazor application:
<ProjectReference Include="..\Blazor-ApexGantt\Blazor-ApexGantt.csproj" />Add to your wwwroot/index.html (WebAssembly) or Pages/_Host.cshtml (Server):
<script src="https://cdn.jsdelivr.net/npm/apexgantt@latest/dist/apexgantt.min.js"></script>In your component or _Imports.razor:
@using Blazor_ApexGantt.Components
@using Blazor_ApexGantt.Models<ApexGantt Options="@options" Tasks="@tasks" />
@code {
private GanttOptions options = new()
{
Width = "100%",
Height = "600px",
ViewMode = "week",
EnableToolbar = true
};
private List<GanttTask> tasks = new()
{
new GanttTask
{
Id = "task1",
Name = "Planning Phase",
StartTime = DateTime.Now,
EndTime = DateTime.Now.AddDays(7),
Progress = 100,
Color = "#3b82f6"
},
new GanttTask
{
Id = "task2",
Name = "Development",
StartTime = DateTime.Now.AddDays(7),
EndTime = DateTime.Now.AddDays(21),
Progress = 45,
Color = "#10b981",
Dependency = "task1"
}
};
}If you have a commercial license for ApexGantt, you need to configure the license key during application startup.
using Blazor_ApexGantt.Extensions;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
// configure with license key
builder.Services.AddApexGantt(options =>
{
options.LicenseKey = "your-license-key";
});
await builder.Build().RunAsync();For production deployments, use environment variables to keep the license key secure:
using Blazor_ApexGantt.Extensions;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
// read from environment variable
builder.Services.AddApexGantt(options =>
{
options.LicenseKey = builder.Configuration["APEXGANTT_LICENSE_KEY"];
});
await builder.Build().RunAsync();If you don't have a license key, simply register the services without configuration:
using Blazor_ApexGantt.Extensions;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddApexGantt();
await builder.Build().RunAsync();Note: The license will be automatically initialized before any charts are rendered. You only need to configure it once during application startup.
Configure your Gantt chart with comprehensive options:
var options = new GanttOptions
{
// Basic Settings
Title = "Project Timeline",
Width = "100%",
Height = "600px",
ViewMode = "week", // day, week, month, quarter, year
TasksContainerWidth = 500,
// Visual Styling
BarBackgroundColor = "#3b82f6",
BarTextColor = "#ffffff",
BarBorderRadius = 4,
BarMargin = 10,
RowHeight = 40,
RowBackgroundColors = new List<string> { "#f9fafb", "#ffffff" },
// Interactivity
EnableToolbar = true,
EnableTaskDrag = true,
EnableTaskResize = true,
EnableTaskEdit = true,
EnableExport = true,
EnableResize = true,
// Dependencies
ArrowColor = "#94a3b8",
// Custom Options (for advanced ApexGantt features)
CustomOptions = new Dictionary<string, object>
{
{ "customProperty", "customValue" }
}
};Define tasks with rich properties:
var task = new GanttTask
{
Id = "unique-id", // Required: Unique identifier
Name = "Task Name", // Required: Display name
StartTime = DateTime.Now, // Required: Start date/time
EndTime = DateTime.Now.AddDays(5), // Required: End date/time
Progress = 75, // Optional: 0-100 percentage
ParentId = "parent-task-id", // Optional: For hierarchical tasks
Dependency = "dependent-task-id", // Optional: Task this depends on
Color = "#3b82f6", // Optional: Custom bar color
ClassName = "custom-class", // Optional: Custom CSS class
CustomData = new Dictionary<string, object> // Optional: Additional data
{
{ "priority", "high" },
{ "assignee", "John Doe" }
}
};A simple Gantt chart with three tasks:
<ApexGantt Options="@basicOptions" Tasks="@basicTasks" />
@code {
private GanttOptions basicOptions = new()
{
Width = "100%",
Height = "400px",
ViewMode = "day"
};
private List<GanttTask> basicTasks = new()
{
new() { Id = "1", Name = "Planning", StartTime = new DateTime(2025, 1, 1),
EndTime = new DateTime(2025, 1, 5), Progress = 100 },
new() { Id = "2", Name = "Development", StartTime = new DateTime(2025, 1, 6),
EndTime = new DateTime(2025, 1, 20), Progress = 60 },
new() { Id = "3", Name = "Testing", StartTime = new DateTime(2025, 1, 21),
EndTime = new DateTime(2025, 1, 25), Progress = 0 }
};
}Enable all interactive features and show task dependencies:
<ApexGantt Options="@interactiveOptions" Tasks="@interactiveTasks" />
@code {
private GanttOptions interactiveOptions = new()
{
Width = "100%",
Height = "600px",
ViewMode = "week",
EnableToolbar = true,
EnableTaskDrag = true,
EnableTaskResize = true,
EnableTaskEdit = true,
EnableExport = true,
ArrowColor = "#6366f1"
};
private List<GanttTask> interactiveTasks = new()
{
new() { Id = "1", Name = "Requirements", StartTime = DateTime.Now,
EndTime = DateTime.Now.AddDays(3), Progress = 100, Color = "#10b981" },
new() { Id = "2", Name = "Design", StartTime = DateTime.Now.AddDays(3),
EndTime = DateTime.Now.AddDays(7), Progress = 80, Color = "#3b82f6",
Dependency = "1" },
new() { Id = "3", Name = "Implementation", StartTime = DateTime.Now.AddDays(7),
EndTime = DateTime.Now.AddDays(21), Progress = 40, Color = "#f59e0b",
Dependency = "2" },
new() { Id = "4", Name = "QA Testing", StartTime = DateTime.Now.AddDays(21),
EndTime = DateTime.Now.AddDays(28), Progress = 0, Color = "#ef4444",
Dependency = "3" }
};
}Apply custom colors and styling:
<ApexGantt Options="@styledOptions" Tasks="@styledTasks" />
@code {
private GanttOptions styledOptions = new()
{
Width = "100%",
Height = "500px",
ViewMode = "month",
BarBackgroundColor = "#1e293b",
BarTextColor = "#f8fafc",
BarBorderRadius = 8,
BarMargin = 15,
RowHeight = 50,
RowBackgroundColors = new List<string> { "#f1f5f9", "#ffffff" }
};
private List<GanttTask> styledTasks = new()
{
new() { Id = "1", Name = "Q1 Planning", StartTime = new DateTime(2025, 1, 1),
EndTime = new DateTime(2025, 3, 31), Progress = 100, Color = "#8b5cf6" },
new() { Id = "2", Name = "Q2 Execution", StartTime = new DateTime(2025, 4, 1),
EndTime = new DateTime(2025, 6, 30), Progress = 50, Color = "#ec4899" },
new() { Id = "3", Name = "Q3 Review", StartTime = new DateTime(2025, 7, 1),
EndTime = new DateTime(2025, 9, 30), Progress = 0, Color = "#14b8a6" }
};
}The repository includes a comprehensive sample application showcasing all features:
- Basic Demo - Simple Gantt chart with minimal configuration
- Styling Demo - Custom colors, borders, and row styling
- Interactive Demo - Drag, resize, edit, and export capabilities
- Dependencies Demo - Task dependency arrows and relationships
- Advanced Demo - Complete project timeline with all features combined
Run the demo:
cd src/Blazor-ApexGantt.Sample
dotnet run
# Navigate to: https://localhost:5001 (or the port shown in console)Then navigate to the demo pages to see examples in action.
Blazor-ApexGantt/
├── src/
│ ├── Blazor-ApexGantt/ # Main library
│ │ ├── Components/
│ │ │ └── ApexGantt.razor # Main Gantt component
│ │ ├── Models/
│ │ │ ├── GanttTask.cs # Task model
│ │ │ └── GanttOptions.cs # Options model
│ │ ├── Interop/
│ │ │ └── ApexGanttInterop.cs # JavaScript interop
│ │ └── wwwroot/js/
│ │ ├── apexgantt.min.js # ApexGantt library
│ │ └── blazor-apexgantt.js # Bridge script
│ │
│ └── Blazor-ApexGantt.Sample/ # Demo application
│ └── Pages/ # Demo pages
├── LICENSE
├── README.md
└── Blazor-ApexGantt.sln
- .NET 9.0 SDK or later
- Blazor WebAssembly or Blazor Server application
- Modern web browser with JavaScript enabled
- ApexGantt JavaScript library (loaded via CDN or local)
Blazor-ApexGantt works on all modern browsers:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See the LICENSE file for details.
- Built on top of ApexGantt JavaScript library
- Inspired by the Blazor community's component ecosystem
- 📫 Report issues on GitHub Issues
- 💬 Join discussions on GitHub Discussions
- 📖 View the ApexGantt documentation for underlying library features
- Additional event callbacks (OnTaskClick, OnTaskDrag, etc.)
- Real-time data updates
- Advanced filtering and grouping
- Export to PDF/PNG functionality
- Localization support
- Performance optimizations for large datasets
Made with ❤️ for the Blazor community