Filament Gantt Lite — Lightweight, RTL-first SVG Gantt for Filament
A lightweight, RTL-first SVG Gantt chart page for Filament v4/v5. Pure in-house code — no dhtmlxGantt, no frappe-gantt, no third-party vendor lock-in. Full Arabic + English support, dark-mode aware, dependency arrows, today line, baseline rendering, holidays, and non-working days — all rendered by a small JS layer over SVG you can read and patch yourself.
Why this exists. Most Filament Gantt plugins wrap a heavyweight commercial JS library, ship 200+ KB of vendor code, and break the moment Filament theming touches them.
filament-gantt-litedoes the opposite — a thin abstract page you extend, an SVG renderer that respects your locale and Tailwind theme, and zero external dependencies. Right-to-left works by design, not as an afterthought.
Try it live: A working integration is included in the Codenzia plugins demo at
/admin/demo/gantt-lite.
Features
- SVG-native rendering — no Canvas, no third-party library, no vendor build step.
- RTL-first — Arabic / Hebrew layouts render flawlessly with mirrored bars, time-axis, and dependency arrows.
- Three view modes — Day, Week, Month, switchable at runtime.
- Dependency arrows between tasks (FS, supports
dependenciesandtask_dependenciesfields). - Today line auto-positioned on the time axis.
- Baselines — toggle planned-vs-actual rendering (translucent baseline rect above the actual bar).
- Holidays + non-working days — hatch-fill non-working columns; configurable per-page.
- Optional sidebar tree — render groups → tasks in a left rail; pass
[]to hide. - Dark-mode aware — colours inherit from your Tailwind theme.
- Pure data model — pass an array of task rows; subclass implements
getGanttDataArray(). - No build step — assets are published as plain JS/CSS to
public/.
Requirements
| Dependency | Version |
|---|---|
| PHP | ^8.3 |
| Filament | ^4.0 || ^5.0 |
| Livewire | ^3.0 || ^4.0 |
Installation
Publish the config file:
Publish the JS/CSS assets to public/:
Quick Start
Extend the abstract GanttLite page in your Filament panel and implement getGanttDataArray():
That's it — visit your panel and the SVG Gantt renders with proper RTL detection from app()->getLocale().
Configuration
After publishing, edit config/filament-gantt-lite.php:
Task data shape
Each task in the array returned by getGanttDataArray() must include id, name, start, end. All other fields are optional.
| Field | Type | Description |
|---|---|---|
id |
int / string | Unique task identifier |
name |
string | Display label |
start |
Y-m-d |
Start date |
end |
Y-m-d |
End date |
progress |
int (0-100) | Completion % overlay on the bar |
color |
hex string | Override bar colour |
dependencies |
array of ids | FS dependency arrows |
task_dependencies |
array of ids | Alias accepted for compatibility |
planned_start |
Y-m-d |
If isBaselinesEnabled() is true, renders baseline bar |
planned_end |
Y-m-d |
See above |
avatar |
URL | Optional assignee avatar shown on the bar |
Sidebar tree (optional)
Return a hierarchical tree from getGanttSidebar() to render a left rail:
Return [] (the default) to hide the sidebar entirely.
Customising the page
Override these hooks on your subclass:
The full boot config sent to the JS layer can also be overridden via getGanttBootConfig().
Livewire events
The page emits these events you can hook from other Livewire components:
| Event | Payload | Fired when |
|---|---|---|
gantt-lite:view-mode-changed |
mode: 'Day'|'Week'|'Month' |
User switches view mode |
gantt-lite:refreshed |
tasks: array |
refreshGantt() is called |
RTL support
RTL detection is automatic via app()->getLocale() === 'ar'. The SVG renderer mirrors:
- Time-axis direction (right-to-left day flow)
- Task bar growth
- Dependency arrow heads
- Sidebar tree indentation
To force a specific direction independent of locale, override getGanttBootConfig() and set 'rtl' => true/false.
Testing
Roadmap
- Drag-to-reschedule task bars (currently read-only).
- Inline resize handles on bars.
- Critical path highlighting.
- Export to PNG / PDF.
License
The MIT License (MIT). Please see License File for more information.