Blazor-ApexGantt 1.2.0

Blazor-ApexGantt

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.

Features

• 📊 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

Installation

NuGet Package

dotnet add package Blazor-ApexGantt

Manual Installation

1. Clone the repository:

git clone https://github.com/apexcharts/Blazor-ApexGantt.git

2. Add a project reference to your Blazor application:

<ProjectReference Include="..\Blazor-ApexGantt\Blazor-ApexGantt.csproj" />

Quick Start

1. Install ApexGantt JavaScript Library

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>

2. Add Using Directives

In your component or _Imports.razor:

@using Blazor_ApexGantt.Components
@using Blazor_ApexGantt.Models

3. Create Your First Gantt Chart

<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"
        }
    };
}

License Configuration

If you have a commercial license for ApexGantt, you need to configure the license key during application startup.

Option 1: Direct Configuration in Program.cs

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();

Option 2: Using Environment Variables (Production)

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();

Without License (Free Version)

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.

Configuration

GanttOptions

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" }
    }
};

GanttTask

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" }
    }
};

Examples

Basic Chart

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 }
    };
}

Interactive Chart with Dependencies

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" }
    };
}

Custom Styling

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" }
    };
}

Demo Application

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.

Project Structure

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

Requirements

• .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)

Browser Support

Blazor-ApexGantt works on all modern browsers:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

See the LICENSE file for details.

Acknowledgments

• Built on top of ApexGantt JavaScript library
• Inspired by the Blazor community's component ecosystem

Support

• 📫 Report issues on GitHub Issues
• 💬 Join discussions on GitHub Discussions
• 📖 View the ApexGantt documentation for underlying library features

Roadmap

• 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