PHPackages alkoumi/filament-google-charts - 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. [Templating & Views](/categories/templating) 4. / 5. alkoumi/filament-google-charts ActiveLibrary[Templating & Views](/categories/templating) alkoumi/filament-google-charts ============================== Google Chart widgets for Filament v1.0.0(3mo ago)51.4k↓25%1MITPHPPHP ^8.2 Since Jan 25Pushed 3mo agoCompare [ Source](https://github.com/alkoumi/filament-google-charts)[ Packagist](https://packagist.org/packages/alkoumi/filament-google-charts)[ Docs](https://github.com/alkoumi/filament-google-charts)[ RSS](/packages/alkoumi-filament-google-charts/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (6)Versions (2)Used By (0) [![Total Downloads](https://camo.githubusercontent.com/d3e34b7c2227def541803c318ba7db8eba702d4782a0870ace6c40b4ec4ad9de/68747470733a2f2f706f7365722e707567782e6f72672f616c6b6f756d692f66696c616d656e742d676f6f676c652d6368617274732f646f776e6c6f616473)](https://packagist.org/packages/alkoumi/filament-google-charts)[![Packagist Stars](https://camo.githubusercontent.com/f0183553b0e4a68cdb66d7b0ecca6e74643d57de6869f20482bb5a848090b5e5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f73746172732f616c6b6f756d692f66696c616d656e742d676f6f676c652d6368617274733f636f6c6f723d79656c6c6f77)](https://camo.githubusercontent.com/f0183553b0e4a68cdb66d7b0ecca6e74643d57de6869f20482bb5a848090b5e5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f73746172732f616c6b6f756d692f66696c616d656e742d676f6f676c652d6368617274733f636f6c6f723d79656c6c6f77)[![License](https://camo.githubusercontent.com/c3829fda6666f260d92b75749645bb3038578c791deaea447a0e3c5021ced896/68747470733a2f2f706f7365722e707567782e6f72672f616c6b6f756d692f66696c616d656e742d676f6f676c652d6368617274732f6c6963656e7365)](https://packagist.org/packages/alkoumi/filament-google-charts)[![Latest Version on Packagist](https://camo.githubusercontent.com/a4a0e260f757ba3e94e7258bcd2ada45c3090e685684209f86747c3a76431730/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616c6b6f756d692f66696c616d656e742d676f6f676c652d6368617274732e737667)](https://packagist.org/packages/alkoumi/filament-google-charts)[![GitHub release (latest by date)](https://camo.githubusercontent.com/ee71344f7dba1fefe2721c2c6a8bd8663f2c5fa7eb8c7b497d4c7705e2c570c6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f616c6b6f756d692f66696c616d656e742d676f6f676c652d636861727473)](https://camo.githubusercontent.com/ee71344f7dba1fefe2721c2c6a8bd8663f2c5fa7eb8c7b497d4c7705e2c570c6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f616c6b6f756d692f66696c616d656e742d676f6f676c652d636861727473) Filament Google Charts Widgets ============================== [](#filament-google-charts-widgets) A seamless integration of Google Charts Widgets into your FilamentPHP applications. See Google Charts examples [Google Charts](https://developers.google.com/chart). -------------------------------------------------------------------------------- [](#see-google-charts-examples-google-charts) Installation ------------ [](#installation) ### Step 1: Install via Composer [](#step-1-install-via-composer) ``` composer require alkoumi/filament-google-charts ``` You can publish the config file with: ``` php artisan vendor:publish --tag=filament-google-charts-config ``` The `config` file contains default global customization options for better charts rendering in light/dark theme based on the great work of [Weekdone](https://github.com/weekdone/GoogleChartStyles) Optionally, you can publish the view using: ``` php artisan vendor:publish --tag=filament-google-charts-views ``` Usage ----- [](#usage) ### Line charts [](#line-charts) ``` use Alkoumi\FilamentGoogleCharts\Widgets\LineChartWidget; class SalesChartWidget extends LineChartWidget { protected static ?string $heading = 'Monthly Sales'; protected static ?int $sort = 1; protected static ?array $options = [ 'legend' => ['position' => 'bottom'], 'colors' => ['#3b82f6', '#10b981'], ]; protected function getData(): array { return [ ['Month', 'Sales', 'Expenses'], ['Jan', 1000, 400], ['Feb', 1170, 460], ['Mar', 660, 1120], ['Apr', 1030, 540], ['May', 1200, 600], ['Jun', 1500, 700], ]; } } ``` ### Pie chart [](#pie-chart) ``` use Alkoumi\FilamentGoogleCharts\Widgets\PieChartWidget; class RegionalSalesWidget extends PieChartWidget { protected static ?string $heading = 'Sales by Region'; protected static ?int $sort = 2; protected int | string | array $columnSpan = 1; protected static ?array $options = [ 'pieHole' => 0.4, 'colors' => ['#3b82f6', '#10b981', '#f59e0b', '#ef4444'], ]; protected function getData(): array { return [ ['Region', 'Sales'], ['North', 1200], ['South', 900], ['East', 1500], ['West', 800], ]; } } ``` ### Donut chart [](#donut-chart) ``` use Alkoumi\FilamentGoogleCharts\Widgets\DonutChartWidget; class DemoDonutChart extends DonutChartWidget { protected static ?string $heading = 'Donut chart'; protected static ?int $sort = 2; protected static ?float $pieHole = 0.5; protected static ?array $options = [ 'legend' => [ 'position' => 'top', ], 'height' => 400, ]; protected function getData(): array { return [ ['Label', 'Aggregate'], ['Col1', 17.2], ['Col2', 23.7], ['Col3', 11.1], ]; } } ``` ### Geo chart || Maps chart [](#geo-chart--maps-chart) ``` use Alkoumi\FilamentGoogleCharts\Widgets\GeoChartWidget; class GeoSalesWidget extends GeoChartWidget { protected static ?string $heading = 'Sales by Country'; protected static ?int $sort = 3; protected int | string | array $columnSpan = 'full'; protected static ?array $options = [ 'colorAxis' => [ 'colors' => ['#bbdefb', '#1976d2'], ], ]; protected function getData(): array { return [ ['Country', 'Sales'], ['United States', 5000], ['Germany', 3000], ['Brazil', 2500], ['Canada', 2000], ['France', 1800], ['United Kingdom', 1500], ['Australia', 1200], ['Japan', 1000], ['Egypt', 800], ['Saudi Arabia', 600], ]; } } ``` [![Pie & Donut charts](./docs/images/demo-charts.png)](./docs/images/demo-charts.png) [![Geo charts](./docs/images/geo-charts.png)](./docs/images/geo-charts.png) [![Line charts](./docs/images/line-charts.png)](./docs/images/line-charts.png) Available chart types --------------------- [](#available-chart-types) Below is a list of available chart widget classes which you may extend, and their corresponding Google Charts documentation page, for inspiration what to return from getData(): `Alkoumi\FilamentGoogleCharts\Widgets\GeoChartWidget` - [Google Charts documentation](https://developers.google.com/chart/interactive/docs/gallery/geochart#configuration-options)`Alkoumi\FilamentGoogleCharts\Widgets\AreaChartWidget` - [Google Charts documentation](https://developers.google.com/chart/interactive/docs/gallery/areachart#configuration-options)`Alkoumi\FilamentGoogleCharts\Widgets\BarChartWidget` - [Google Charts documentation](https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options)`Alkoumi\FilamentGoogleCharts\Widgets\ColumnChartWidget` - [Google Charts documentation](https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options)`Alkoumi\FilamentGoogleCharts\Widgets\DonutChartWidget` - [Google Charts documentation](https://developers.google.com/chart/interactive/docs/gallery/piechart#donut)`Alkoumi\FilamentGoogleCharts\Widgets\LineChartWidget` - [Google Charts documentation](https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options)`Alkoumi\FilamentGoogleCharts\Widgets\PieChartWidget` - [Google Charts documentation](https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-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 static ?string $pollingInterval = '10s'; ``` Alternatively, you may disable polling: ``` protected static ?string $pollingInterval = null; ``` Chart configuration options --------------------------- [](#chart-configuration-options) You may specify an `$options` variable on the chart class to control the many configuration options that the [Google Charts](https://developers.google.com/chart) library provides. For instance, you could change the position off the legend for PieChartWidget class and set a custom height: ``` protected static ?array $options = [ 'legend' => [ 'position' => 'bottom', ], 'height' => 300, ]; ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Credits ------- [](#credits) - [Alkoumi](https://github.com/alkoumi) - [Arber Mustafa](https://github.com/arbermustafa) - [Google Web Components](https://github.com/GoogleWebComponents/google-chart) - [Weekdone](https://github.com/weekdone/GoogleChartStyles) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 42 — FairBetter than 90% of packages Maintenance78 Regular maintenance activity Popularity27 Limited adoption so far Community7 Small or concentrated contributor base Maturity46 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 Unknown Total 1 Last Release 113d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/7347145dd8f0802bd4458a339dd6ed9431c4e2533ba3e8808137c706cef1f5a4?d=identicon)[alkoumi](/maintainers/alkoumi) --- Top Contributors [![alkoumi](https://avatars.githubusercontent.com/u/10585943?v=4)](https://github.com/alkoumi "alkoumi (1 commits)") --- Tags laravelgeochartsfilament-pluginGoogle Chartsalkoumifilament-google-chartsgeo-charts ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/alkoumi-filament-google-charts/health.svg) ``` [![Health](https://phpackages.com/badges/alkoumi-filament-google-charts/health.svg)](https://phpackages.com/packages/alkoumi-filament-google-charts) ``` ### Alternatives [leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts)[khill/lavacharts PHP wrapper library for the Google Chart API 6202.0M2](/packages/khill-lavacharts)[ryangjchandler/blade-capture-directive Create inline partials in your Blade templates with ease. 8222.2M12](/packages/ryangjchandler-blade-capture-directive)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[arbermustafa/filament-google-charts-widgets Chart widgets for Filament Php using Google Charts 147.4k](/packages/arbermustafa-filament-google-charts-widgets)[daikazu/laravel-glider Start using Glide on-the-fly instantly in your Laravel blade templates. 882.3k](/packages/daikazu-laravel-glider) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)