PHPackages koassi/filament-highcharts - 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. koassi/filament-highcharts ActiveLibrary koassi/filament-highcharts ========================== Filament Integration for Highcharts v1.1.1(1mo ago)12MITPHPPHP ^8.3CI passing Since Jul 19Pushed 1mo agoCompare [ Source](https://github.com/KoassiAkakpo/filament-highcharts)[ Packagist](https://packagist.org/packages/koassi/filament-highcharts)[ Docs](https://github.com/KoassiAkakpo/filament-highcharts)[ GitHub Sponsors](https://github.com/Koassi)[ RSS](/packages/koassi-filament-highcharts/feed)WikiDiscussions main Synced 2w ago READMEChangelog (3)Dependencies (12)Versions (3)Used By (0) Highcharts integration for Filament =================================== [](#highcharts-integration-for-filament) [![Latest Version on Packagist](https://camo.githubusercontent.com/0176bbd007478b958c5ed2b4d112072b6b249167a0de145cce2b8fa01883068c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b6f617373692f66696c616d656e742d686967686368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/koassi/filament-highcharts)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/de6c2e26f2de08e0a30d88c9d7c68e31e2b7b66c9d0f5ff666ee73e71b56e495/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f4b6f61737369416b616b706f2f66696c616d656e742d686967686368617274732f70696e742e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/KoassiAkakpo/filament-highcharts/actions?query=workflow%3A%22PHP+Linting+%28Pint%29%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/483fc7ae660bcfab23dc53c8f126b3117900726f586b815bbecdc61187ebb27a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b6f617373692f66696c616d656e742d686967686368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/koassi/filament-highcharts) Strongly inspired by [Leandro Ferreira's Apex Charts plugin](https://filamentphp.com/plugins/leandrocfe-apex-charts), this plugin delivers [Highcharts](https://www.highcharts.com) integration for [Filament](https://filamentphp.com) panels. [![Filament dashboard showing an area chart widget and a column chart widget with schema filters](art/screenshots/exemple1.png)](art/screenshots/exemple1.png) [![Line chart widget with a simple select filter and polling](art/screenshots/exemple2.png)](art/screenshots/exemple2.png)[![Pie chart widget using defer loading and extraJsOptions](art/screenshots/exemple3.png)](art/screenshots/exemple3.png)Requirements ------------ [](#requirements) - PHP 8.3+ - Filament 5.x > **Note:** Highcharts is free for personal/non-commercial use. For commercial use, please review the [Highcharts license](https://shop.highcharts.com/). Installation ------------ [](#installation) You can install the package via composer: ``` composer require koassi/filament-highcharts ``` Register the plugin for the Filament Panels you want to use it in: ``` use Koassi\FilamentHighcharts\FilamentHighchartsPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ FilamentHighchartsPlugin::make(), ]); } ``` Usage ----- [](#usage) Start by creating a widget with the command: ``` php artisan make:filament-highcharts BlogPostsChart ``` The command will interactively ask for the chart type, and where to create the widget (panel, resource, or alongside your Livewire components). Your widget extends `Koassi\FilamentHighcharts\Widgets\HighchartsWidget` and defines its chart through the `getOptions()` method, which returns a standard [Highcharts configuration](https://api.highcharts.com/highcharts/) array: ``` use Koassi\FilamentHighcharts\Widgets\HighchartsWidget; class BlogPostsChart extends HighchartsWidget { protected static ?string $chartId = 'blogPostsChart'; protected static ?string $heading = 'Blog Posts'; protected function getOptions(): array { return [ 'chart' => [ 'type' => 'line', 'styledMode' => true, ], 'title' => [ 'text' => 'Blog Posts per Quarter', ], 'xAxis' => [ 'categories' => ['Q1', 'Q2', 'Q3', 'Q4'], ], 'series' => [ [ 'name' => '2025', 'data' => [49.9, 71.5, 106.4, 129.2], ], ], ]; } } ``` Don't forget to register the widget in your panel/resource/page, as with any Filament widget. Ready-to-use widgets demonstrating filters, polling, deferred loading and raw JS options — the ones behind the screenshots above — are available in the [examples/](examples/) directory. ### Available chart samples [](#available-chart-samples) The generator ships with ready-to-use stubs for the following chart types. For more samples, please refer to the [Highcharts documentation](https://api.highcharts.com/highcharts/). ChartChartChart[Line chart](https://www.highcharts.com/demo/highcharts/line-chart)[Bar chart](https://www.highcharts.com/demo/highcharts/bar-chart)[Pie chart](https://www.highcharts.com/demo/highcharts/pie-chart)[Area chart](https://www.highcharts.com/demo/highcharts/area-chart)[Arearange chart](https://www.highcharts.com/demo/highcharts/arearange-chart)[Areaspline chart](https://www.highcharts.com/demo/highcharts/areaspline-chart)[Areasplinerange chart](https://www.highcharts.com/demo/highcharts/areasplinerange-chart)[Bellcurve chart](https://www.highcharts.com/demo/highcharts/bellcurve-chart)[Boxplot chart](https://www.highcharts.com/demo/highcharts/box-plot)[Bubble chart](https://www.highcharts.com/demo/highcharts/bubble)[Bullet chart](https://www.highcharts.com/demo/highcharts/bullet-graph)[Column chart](https://www.highcharts.com/demo/highcharts/column-chart)[Columnpyramid chart](https://www.highcharts.com/demo/highcharts/column-pyramid)[Columnrange chart](https://www.highcharts.com/demo/highcharts/columnrange-chart)[Cylinder chart](https://www.highcharts.com/demo/highcharts/cylinder-chart)[Dependencywheel chart](https://www.highcharts.com/demo/highcharts/dependencywheel-chart)[Dumbbell chart](https://www.highcharts.com/demo/highcharts/dumbbell-chart)[Errorbar chart](https://www.highcharts.com/demo/highcharts/errorbar-chart)[Funnel chart](https://www.highcharts.com/demo/highcharts/funnel-chart)[Funnel3d chart](https://www.highcharts.com/demo/highcharts/funnel3d-chart)[Gauge chart](https://www.highcharts.com/demo/highcharts/gauge-chart)[Heatmap chart](https://www.highcharts.com/demo/highcharts/heatmap-chart)[Histogram chart](https://www.highcharts.com/demo/highcharts/histogram-chart)[Item chart](https://www.highcharts.com/demo/highcharts/item-chart)[Lollipop chart](https://www.highcharts.com/demo/highcharts/lollipop-chart)[Networkgraph chart](https://www.highcharts.com/demo/highcharts/networkgraph-chart)[Organization chart](https://www.highcharts.com/demo/highcharts/organization-chart)[Packedbubble chart](https://www.highcharts.com/demo/highcharts/packedbubble-chart)[Pareto chart](https://www.highcharts.com/demo/highcharts/pareto-chart)[Pictorial chart](https://www.highcharts.com/demo/highcharts/pictorial-chart)[Polygon chart](https://www.highcharts.com/demo/highcharts/polygon-chart)[Pyramid chart](https://www.highcharts.com/demo/highcharts/pyramid-chart)[Pyramid3d chart](https://www.highcharts.com/demo/highcharts/pyramid3d-chart)[Sankey chart](https://www.highcharts.com/demo/highcharts/sankey-chart)[Scatter chart](https://www.highcharts.com/demo/highcharts/scatter-chart)[Scatter3d chart](https://www.highcharts.com/demo/highcharts/scatter3d-chart)[Solidgauge chart](https://www.highcharts.com/demo/highcharts/solidgauge-chart)[Spline chart](https://www.highcharts.com/demo/highcharts/spline-chart)[Streamgraph chart](https://www.highcharts.com/demo/highcharts/streamgraph-chart)[Sunburst chart](https://www.highcharts.com/demo/highcharts/sunburst-chart)[Tilemap chart](https://www.highcharts.com/demo/highcharts/tilemap-chart)[Timeline chart](https://www.highcharts.com/demo/highcharts/timeline-chart)[Treegraph chart](https://www.highcharts.com/demo/highcharts/treegraph-chart)[Treemap chart](https://www.highcharts.com/demo/highcharts/treemap-chart)[Variablepie chart](https://www.highcharts.com/demo/highcharts/variablepie-chart)[Variwide chart](https://www.highcharts.com/demo/highcharts/variwide-chart)[Vector chart](https://www.highcharts.com/demo/highcharts/vector-chart)[Venn chart](https://www.highcharts.com/demo/highcharts/venn-chart)[Waterfall chart](https://www.highcharts.com/demo/highcharts/waterfall-chart)[Windbarb chart](https://www.highcharts.com/demo/highcharts/windbarb-chart)[Wordcloud chart](https://www.highcharts.com/demo/highcharts/wordcloud-chart)[Xrange chart](https://www.highcharts.com/demo/highcharts/x-range-series)[Arcdiagram chart](https://www.highcharts.com/demo/highcharts/arc-diagram)The list of available chart types is defined in the `chart_options` key of the package config file. Setting a widget title ---------------------- [](#setting-a-widget-title) You may set a widget title (heading): ``` protected static ?string $heading = 'Blog Posts Chart'; ``` Optionally, you can use the `getHeading()` method. Setting a widget subheading --------------------------- [](#setting-a-widget-subheading) You may set a widget subheading: ``` protected static ?string $subheading = 'This is a subheading'; ``` Optionally, you can use the `getSubheading()` method. Setting a chart id ------------------ [](#setting-a-chart-id) You may set a chart id: ``` protected static ?string $chartId = 'blogPostsChart'; ``` If none is provided, a random id is generated. Making a widget collapsible --------------------------- [](#making-a-widget-collapsible) You may set a widget to be collapsible: ``` protected static bool $isCollapsible = true; ``` You can also use the `isCollapsible()` method: ``` protected function isCollapsible(): bool { return true; } ``` Setting a widget height ----------------------- [](#setting-a-widget-height) By default, the widget height is set to `300px`. You may set a custom height: ``` protected static int $contentHeight = 400; //px ``` Optionally, you can use the `getContentHeight()` method: ``` protected function getContentHeight(): ?int { return 400; } ``` Setting a widget footer ----------------------- [](#setting-a-widget-footer) You may set a widget footer: ``` protected static ?string $footer = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'; ``` You can also use the `getFooter()` method: Custom view: ``` use Illuminate\Contracts\Support\Htmlable; use Illuminate\Contracts\View\View; protected function getFooter(): null|string|Htmlable|View { return view('custom-footer', ['text' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.']); } ``` ``` {{ $text }} ``` Html string: ``` use Illuminate\Contracts\Support\Htmlable; use Illuminate\Contracts\View\View; use Illuminate\Support\HtmlString; protected function getFooter(): null|string|Htmlable|View { return new HtmlString('Lorem Ipsum is simply dummy text of the printing and typesetting industry.'); } ``` Hiding header content --------------------- [](#hiding-header-content) You can hide header content by **NOT** providing these: - `$heading` / `getHeading()` - `$subheading` / `getSubheading()` Filtering chart data -------------------- [](#filtering-chart-data) You can set up chart filters to change the data shown on the chart. Commonly, this is used to change the time period that chart data is rendered for. ### Filter schema [](#filter-schema) You may use components from the [Schemas](https://filamentphp.com/docs/4.x/schemas/overview#available-components) package to create custom filter forms. Use the `HasFiltersSchema` trait and implement the `filtersSchema()` method to define the filter form schema: ``` use Filament\Forms\Components\DatePicker; use Filament\Forms\Components\TextInput; use Filament\Schemas\Schema; use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema; use Koassi\FilamentHighcharts\Widgets\HighchartsWidget; class BlogPostsChart extends HighchartsWidget { use HasFiltersSchema; public function filtersSchema(Schema $schema): Schema { return $schema->components([ TextInput::make('title') ->default('Blog Posts Chart'), DatePicker::make('date_start') ->default('2025-07-01'), DatePicker::make('date_end') ->default('2025-07-31'), ]); } /** * Use this method to update the chart options when the filter form is submitted. */ public function updatedInteractsWithSchemas(string $statePath): void { $this->updateOptions(); } } ``` The data from the custom filter is available in the `$this->filters` array. You can use the active filter values within your `getOptions()` method: ``` protected function getOptions(): array { $title = $this->filters['title']; $dateStart = $this->filters['date_start']; $dateEnd = $this->filters['date_end']; return [ //chart options ]; } ``` ### Single select [](#single-select) To set a default filter value, set the `$filter` property: ``` public ?string $filter = 'today'; ``` Then, define the `getFilters()` method to return an array of values and labels for your filter: ``` protected function getFilters(): ?array { return [ 'today' => 'Today', 'week' => 'Last week', 'month' => 'Last month', 'year' => 'This year', ]; } ``` You can use the active filter value within your `getOptions()` method: ``` protected function getOptions(): array { $activeFilter = $this->filter; return [ //chart options ]; } ``` Live updating (polling) ----------------------- [](#live-updating-polling) By default, chart widgets refresh their data every 5 seconds. To customize this, you may override the `$pollingInterval` property on the class to a new interval: ``` protected ?string $pollingInterval = '10s'; ``` Alternatively, you may disable polling altogether: ``` protected ?string $pollingInterval = null; ``` Defer loading ------------- [](#defer-loading) This can be helpful when you have slow queries and you don't want to hold up the entire page load: ``` protected static bool $deferLoading = true; protected function getOptions(): array { //showing a loading indicator immediately after the page load if (! $this->readyToLoad) { return []; } //slow query sleep(2); return [ //chart options ]; } ``` Loading indicator ----------------- [](#loading-indicator) You can change the loading indicator: ``` protected static ?string $loadingIndicator = 'Loading...'; ``` You can also use the `getLoadingIndicator()` method: ``` use Illuminate\Contracts\View\View; protected function getLoadingIndicator(): null|string|View { return view('custom-loading-indicator'); } ``` ``` Loading... ``` Dark mode --------- [](#dark-mode) Dark mode is supported and enabled by default. It follows the Filament theme (light / dark / system) and reacts to theme changes in real time. For the best result, enable [styled mode](https://www.highcharts.com/docs/chart-design-and-style/style-by-css) in your chart options: ``` 'chart' => [ 'styledMode' => true, ], ``` Extra options and Formatters ---------------------------- [](#extra-options-and-formatters) Chart options returned by `getOptions()` are converted to JSON, so they cannot contain JavaScript functions. Use the `extraJsOptions()` method to add raw JavaScript options (formatters, callbacks...) that are merged into the chart options on the client side: ``` use Filament\Support\RawJs; protected function extraJsOptions(): ?RawJs { return RawJs::make( '12.6.0', ``` Publishing views ---------------- [](#publishing-views) Optionally, you can publish the views using: ``` php artisan vendor:publish --tag="filament-highcharts-views" ``` Publishing translations ----------------------- [](#publishing-translations) Optionally, you can publish the translations using: ``` php artisan vendor:publish --tag="filament-highcharts-translations" ``` Publishing stubs ---------------- [](#publishing-stubs) Optionally, you can publish the widget stubs used by the `make:filament-highcharts` command using: ``` php artisan vendor:publish --tag="filament-highcharts-stubs" ``` Testing ------- [](#testing) ``` vendor/bin/pest ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities. Credits ------- [](#credits) - [koassi](https://github.com/KoassiAkakpo) - [All Contributors](https://github.com/KoassiAkakpo/filament-highcharts/graphs/contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 40 — FairBetter than 85% of packages Maintenance90 Actively maintained with recent releases Popularity4 Limited adoption so far Community6 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 45d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/181533938?v=4)[koassi](/maintainers/koassi)[@KOASSI](https://github.com/KOASSI) --- Top Contributors [![KoassiAkakpo](https://avatars.githubusercontent.com/u/28142452?v=4)](https://github.com/KoassiAkakpo "KoassiAkakpo (35 commits)") --- Tags filamentphphighchartslaravellivewirelaravelhighchartsfilament ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/koassi-filament-highcharts/health.svg) ``` [![Health](https://phpackages.com/badges/koassi-filament-highcharts/health.svg)](https://phpackages.com/packages/koassi-filament-highcharts) ``` ### Alternatives [awcodes/filament-curator A media picker plugin for FilamentPHP. 441414.6k29](/packages/awcodes-filament-curator)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3915.5k](/packages/rawilk-profile-filament-plugin)[backstage/mails View logged mails and events in a beautiful Filament UI. 16429.7k](/packages/backstage-mails)[ysfkaya/filament-phone-input A phone input component for Laravel Filament 3241.5M29](/packages/ysfkaya-filament-phone-input)[relaticle/custom-fields User Defined Custom Fields for Laravel Filament 16472.9k](/packages/relaticle-custom-fields)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 85264.8k11](/packages/stephenjude-filament-two-factor-authentication) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)