PHPackages                             yacoubalhaidari/organization-chart - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. yacoubalhaidari/organization-chart

ActiveLibrary[Utility & Helpers](/categories/utility)

yacoubalhaidari/organization-chart
==================================

A Filament plugin to display organization charts using Highcharts

v1.0.4(5mo ago)81343MITPHPPHP ^8.1

Since Nov 11Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/YacoubAl-hardari/organization-chart)[ Packagist](https://packagist.org/packages/yacoubalhaidari/organization-chart)[ Docs](https://github.com/yacoubalhaidari/organization-chart)[ RSS](/packages/yacoubalhaidari-organization-chart/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (4)Versions (6)Used By (0)

Filament Organization Chart Widget
==================================

[](#filament-organization-chart-widget)

[![organization-chart](https://private-user-images.githubusercontent.com/94101869/514916463-dd1f9ccf-0f50-468f-87fb-8cda2f0bfcfc.jpeg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODMyNDI4OTMsIm5iZiI6MTc4MzI0MjU5MywicGF0aCI6Ii85NDEwMTg2OS81MTQ5MTY0NjMtZGQxZjljY2YtMGY1MC00NjhmLTg3ZmItOGNkYTJmMGJmY2ZjLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDcwNVQwOTA5NTNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MWRhZjhmYTdlYjA1YWE3M2JmMzFhM2RmMzRiMDM4NTQ0MTU1MWU5YTQ4ZGFhNTY5OWYwOWM0Y2MyMjZkZTQxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZqcGVnIn0.bHQ_8eYRQfByShiBjr9VeFBl-osqwiT85eFAqcpf5vg)](https://private-user-images.githubusercontent.com/94101869/514916463-dd1f9ccf-0f50-468f-87fb-8cda2f0bfcfc.jpeg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODMyNDI4OTMsIm5iZiI6MTc4MzI0MjU5MywicGF0aCI6Ii85NDEwMTg2OS81MTQ5MTY0NjMtZGQxZjljY2YtMGY1MC00NjhmLTg3ZmItOGNkYTJmMGJmY2ZjLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDcwNVQwOTA5NTNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MWRhZjhmYTdlYjA1YWE3M2JmMzFhM2RmMzRiMDM4NTQ0MTU1MWU5YTQ4ZGFhNTY5OWYwOWM0Y2MyMjZkZTQxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZqcGVnIn0.bHQ_8eYRQfByShiBjr9VeFBl-osqwiT85eFAqcpf5vg)

[![Latest Version on Packagist](https://camo.githubusercontent.com/87c51a6d677de4349d1bfd9cef461e9e6a6953d7de5ec12d391125800d32a215/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7961636f7562616c686169646172692f6f7267616e697a6174696f6e2d63686172742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/yacoubalhaidari/organization-chart)[![Total Downloads](https://camo.githubusercontent.com/a021b6ab4ce6d2b5696134ae4a842591d6dcfa2f478a506b2530a49cf14cb140/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7961636f7562616c686169646172692f6f7267616e697a6174696f6e2d63686172742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/yacoubalhaidari/organization-chart)[![License](https://camo.githubusercontent.com/290f3404d8761066ae135e93ede1594990f1b157846b4af317d0ad8824fc798e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f7961636f7562616c686169646172692f6f7267616e697a6174696f6e2d63686172742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/yacoubalhaidari/organization-chart)

A powerful and elegant Filament widget plugin for creating interactive organizational charts. Built on top of Highcharts, this package provides a fluent API for visualizing your company's hierarchy with style.

[![Organization Chart Demo](https://camo.githubusercontent.com/8568aba7de1250dbeda35ce7ac04ae2308fc740dcf725ed588123832e025f2a7/68747470733a2f2f7669612e706c616365686f6c6465722e636f6d2f383030783430302f3165323933622f6666666666663f746578743d496e7465726163746976652b4f7267616e697a6174696f6e2b4368617274)](https://camo.githubusercontent.com/8568aba7de1250dbeda35ce7ac04ae2308fc740dcf725ed588123832e025f2a7/68747470733a2f2f7669612e706c616365686f6c6465722e636f6d2f383030783430302f3165323933622f6666666666663f746578743d496e7465726163746976652b4f7267616e697a6174696f6e2b4368617274)

✨ Features
----------

[](#-features)

- 🎨 **Beautiful & Interactive** - Smooth, responsive charts with hover effects and animations
- 🏗️ **Fluent Builder API** - Intuitive, chainable methods for building complex hierarchies
- 👤 **Employee Profiles** - Support for profile images, titles, and custom styling
- 🎯 **Fully Customizable** - Control colors, layout, height, and orientation
- 📱 **Responsive Design** - Works seamlessly on desktop, tablet, and mobile
- 🌍 **Multi-language** - Built-in support for English and Arabic (easily extensible)
- ✅ **Smart Validation** - Automatic error checking and helpful debugging tools
- 🚀 **Database Ready** - Easily integrate with Eloquent models
- 🎨 **Artisan Command** - Quick scaffold widgets with `make:organization-chart`

---

📋 Table of Contents
-------------------

[](#-table-of-contents)

- [Requirements](#-requirements)
- [Installation](#-installation)
- [Quick Start](#-quick-start)
- [Usage Examples](#-usage-examples)
- [API Reference](#-api-reference)
- [Customization](#-customization)
- [Building from Source](#-building-from-source)
- [Contributing](#-contributing)
- [License](#-license)

---

🔧 Requirements
--------------

[](#-requirements)

- **PHP**: 8.1 or higher
- **Laravel**: 10.x or 11.x or 12.x
- **Filament**: 3.x or 4.x
- **Composer**: 2.x

---

📦 Installation
--------------

[](#-installation)

### Step 1: Install via Composer

[](#step-1-install-via-composer)

```
composer require yacoubalhaidari/organization-chart
```

### Step 2: Publish Assets

[](#step-2-publish-assets)

The package assets are automatically published during installation. If needed, you can republish them:

```
php artisan filament:assets
```

### Step 3: Create Your First Widget

[](#step-3-create-your-first-widget)

Use the artisan command to scaffold a new organization chart widget:

```
php artisan make:organization-chart CompanyOrgChart
```

This creates a ready-to-use widget at `app/Filament/Widgets/CompanyOrgChartWidget.php`.

### Step 4: Register the Widget

[](#step-4-register-the-widget)

Add the widget to your Filament Panel Provider (e.g., `app/Providers/Filament/AdminPanelProvider.php`):

```
use App\Filament\Widgets\CompanyOrgChartWidget;

public function panel(Panel $panel): Panel
{
    return $panel
        ->widgets([
            CompanyOrgChartWidget::class,
        ]);
}
```

That's it! 🎉 Visit your Filament dashboard to see your organization chart.

---

🚀 Quick Start
-------------

[](#-quick-start)

### Using the Artisan Command (Recommended)

[](#using-the-artisan-command-recommended)

Generate a widget with pre-configured examples:

```
php artisan make:organization-chart MyCompany
```

This creates a widget with:

- 4 executive-level positions (CEO, CTO, CFO, COO)
- Profile images and custom colors
- Commented examples for departments and teams
- Best practices and proper structure

### Manual Widget Creation

[](#manual-widget-creation)

Alternatively, create a widget manually:

```