PHPackages icehouse-ventures/laravel-chartjs - 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. icehouse-ventures/laravel-chartjs ActiveLibrary[Utility & Helpers](/categories/utility) icehouse-ventures/laravel-chartjs ================================= Simple package to facilitate and automate the use of charts in Laravel using the Chart.js library v5.0.0(2w ago)118239.1k↓23.5%22[3 issues](https://github.com/icehouse-ventures/laravel-chartjs/issues)[1 PRs](https://github.com/icehouse-ventures/laravel-chartjs/pulls)MITPHPPHP ^8.2CI passing Since Jan 12Pushed 2w ago4 watchersCompare [ Source](https://github.com/icehouse-ventures/laravel-chartjs)[ Packagist](https://packagist.org/packages/icehouse-ventures/laravel-chartjs)[ RSS](/packages/icehouse-ventures-laravel-chartjs/feed)WikiDiscussions master Synced 2w ago READMEChangelog (10)Dependencies (12)Versions (48)Used By (0) laravel-chartjs - A Chart.js wrapper for Laravel ================================================ [](#laravel-chartjs---a-chartjs-wrapper-for-laravel) Simple package to facilitate and automate the use of charts and graphs in Laravel using the [Chart.js](https://www.chartjs.org/) library. The current release supports PHP 8.2+ and Laravel 12 or 13. Setup ----- [](#setup) This package provides a wrapper for Chartjs that allows it to be used simply and easily inside a Laravel application. The package supports a number of installation methods depending on your needs and familiarity with JavaScript. ### 1. Installing this package [](#1-installing-this-package) ``` composer require icehouse-ventures/laravel-chartjs ``` Laravel package discovery registers the service provider automatically. Publishing the config file to your own application will allow you to customise the package with several settings such as the Chartjs version to be used and the delivery method for the Chartjs files. ``` php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --tag="config" ``` ### 2. Installing Chart.js [](#2-installing-chartjs) Next, choose how Chart.js will be delivered to your application. There are several installation options for Chartjs. By default, this package comes set to use the 'custom' self-managed delivery method (to avoid conflict with existing installations). You can also select from several other delivery methods: CDN --- [](#cdn) For rapid development and testing between versions, set the delivery method to `cdn` in `config/chartjs.php`. Chart.js versions 2, 3 and 4 are available by CDN. The package loads the selected date adapter, plus Numeral.js for backwards compatibility. CDN URLs are pinned to the selected major so a future Chart.js major cannot be pulled into an existing application unexpectedly. Publish ------- [](#publish) If you do not use JavaScript packages anywhere else in your application or are new to JavaScript development, then you may not already have the Node Package Manager, Laravel Mix or Vite set up. In that case, this package includes pre-compiled versions of Chartjs that you can use in your application. To publish the chart.js binary to your application's public folder (where JavaScript bundles are stored) you can publish the package's pre-built distribution assets. By default, the publish method will install Chartjs version 4 using the latest version in the package. If you want to publish an older version, we have also included the latest stable Chartjs releases for version 3 and version 2. You can publish these to your public assets folder using the following commands: ``` # Publish Chart.js version 4 assets php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --force --tag="assets" # Publish Chart.js version 3 assets php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --force --tag="assets-v3" # Publish Chart.js version 2 assets php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --force --tag="assets-v2" ``` Binary ------ [](#binary) In some rare circumstances, such as local development without an internet connection, private applications, shared servers or where you cannot access the public folder on your server, then you may wish to have end-users directly load the binary files. This method is not recommended because it streams the contents of the files from inside your application. This delivery method will load the Chartjs files normally published to your assets folder, directly from inside your vendor folder. To use this method, set the delivery config variable to 'binary' and choose the Chartjs version you wish to use in the config file. NPM (Best Practice) ------------------- [](#npm-best-practice) The recommended method is to include Chart.js in your application's normal JavaScript bundle using npm and Vite. See the [official Chart.js installation guide](https://www.chartjs.org/docs/latest/getting-started/installation.html). The other delivery methods are useful when a JavaScript build pipeline is not available. Custom ------ [](#custom) If you leave the config as blank or 'custom', then the package will assume that the Chart JS JavaScript has been loaded manually. You can do this by adding a CDN to the header of your page such as: ``` ``` Usage: ====== [](#usage) You can call the package Facade to easily load the service responsible for building the charts and then pass through a fluent Laravel-style interface to set your various chart settings. ``` use IcehouseVentures\LaravelChartjs\Facades\Chartjs; $chart = Chartjs::build() ->name('salesChart') ->type('line') ->labels(['January', 'February']) ->datasets([ [ 'label' => 'Sales', 'data' => [12, 19], ], ]) ->options([]); ``` The builder needs the name of the chart, the type of chart (that can be anything that is supported by Chartjs) and the other custom configurations like labels, datasets and options. Responsive sizing ----------------- [](#responsive-sizing) The canvas `width` and `height` attributes are initial drawing-buffer sizes in pixels, not CSS percentages. For a chart that follows its container, size the wrapper with CSS and let Chart.js handle the canvas: ``` $chart->options([ 'responsive' => true, 'maintainAspectRatio' => false, ]); ``` ``` ``` In the dataset interface you can pass any configuration and options to your chart. All options available in Chartjs documentation are supported. Just write the configuration with php array notations and it works! ``` $chart->options([ 'scales' => [ 'x' => [ 'title' => [ 'display' => true, 'text' => 'X Axis Title' ], ] ] ]); ``` Advanced Chartjs options ======================== [](#advanced-chartjs-options) The basic options() method allows you to add simple key-value pair based options. Using the optionsRaw() method it's possible to add more complex nested Chartjs options in raw json format and to used nested calls to the options for plugins: Passing raw JavaScript options to the chart: ``` $chart->optionsRaw("{ scales: { x: { title: { display: true, text: 'X Axis Title', } } }, plugins: { title: { display: true, text: 'Chart Title', font: { size: 16 } }, legend: { display: false, }, } }"); ``` The string form of `optionsRaw()` is inserted as executable JavaScript. Only use it with application-authored values; never interpolate user input. Prefer passing an array when callbacks or other JavaScript expressions are not required. Examples ======== [](#examples) 1 - Line Chart: ``` // Controller CExampleController.php use IcehouseVentures\LaravelChartjs\Facades\Chartjs; $chart = Chartjs::build() ->name('lineChartTest') ->type('line') ->size(['width' => 400, 'height' => 200]) ->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July']) ->datasets([ [ "label" => "My First dataset", 'backgroundColor' => "rgba(38, 185, 154, 0.31)", 'borderColor' => "rgba(38, 185, 154, 0.7)", "pointBorderColor" => "rgba(38, 185, 154, 0.7)", "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)", "pointHoverBackgroundColor" => "#fff", "pointHoverBorderColor" => "rgba(220,220,220,1)", "data" => [65, 59, 80, 81, 56, 55, 40], "fill" => false, ], [ "label" => "My Second dataset", 'backgroundColor' => "rgba(38, 185, 154, 0.31)", 'borderColor' => "rgba(38, 185, 154, 0.7)", "pointBorderColor" => "rgba(38, 185, 154, 0.7)", "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)", "pointHoverBackgroundColor" => "#fff", "pointHoverBorderColor" => "rgba(220,220,220,1)", "data" => [12, 33, 44, 44, 55, 23, 40], "fill" => false, ] ]) ->options([]); return view('example', compact('chart')); // Blade example.blade.php ``` 2 - Bar Chart: ``` // Controller ExampleController.php use IcehouseVentures\LaravelChartjs\Facades\Chartjs; $chart = Chartjs::build() ->name('barChartTest') ->type('bar') ->size(['width' => 400, 'height' => 200]) ->labels(['Label x', 'Label y']) ->datasets([ [ "label" => "My First dataset", 'backgroundColor' => ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'], 'data' => [69, 59] ], [ "label" => "My First dataset", 'backgroundColor' => ['rgba(255, 99, 132, 0.3)', 'rgba(54, 162, 235, 0.3)'], 'data' => [65, 12] ] ]) ->options([ "scales" => [ "y" => [ "beginAtZero" => true ] ] ]); return view('example', compact('chart')); // Blade example.blade.php ``` 3 - Pie Chart / Doughnut Chart: ``` // Controller ExampleController.php use IcehouseVentures\LaravelChartjs\Facades\Chartjs; $chart = Chartjs::build() ->name('pieChartTest') ->type('pie') ->size(['width' => 400, 'height' => 200]) ->labels(['Label x', 'Label y']) ->datasets([ [ 'backgroundColor' => ['#FF6384', '#36A2EB'], 'hoverBackgroundColor' => ['#FF6384', '#36A2EB'], 'data' => [69, 59] ] ]) ->options([]); return view('example', compact('chart')); // Blade example.blade.php ``` Advanced Custom Views ===================== [](#advanced-custom-views) If you need to edit the underlying Blade component (to adjust CDN logic or deeper CSS changes to the `` element used to render the charts), you can publish the views: ``` php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --tag="views" --force ``` You can then customise the published Blade file at `./views/vendor/laravelchartjs/chart-template.blade.php` in your application. To revert any customisation, simply delete or rename this file from your application. Livewire Interactive Charts =========================== [](#livewire-interactive-charts) This package supports dynamically updated charts in Livewire. The current release and [demo repository](https://github.com/icehouse-ventures/laravel-chartjs-demo)are tested with Livewire 4. Conventions for computed properties and public state may differ on earlier Livewire versions. ``` // Inside your Livewire blade component: example-livewire-chart-demo.blade.php ``` ``` // Inside your Livewire php component: ExampleLivewireChartDemo.php use IcehouseVentures\LaravelChartjs\Facades\Chartjs; class ExampleLivewireChartDemo extends Component { public $datasets; #[Computed] public function chart() { return Chartjs::build() ->name("UserRegistrationsChart") ->livewire() ->model("datasets") ->type("line"); } public function render() { $this->getData(); return view('livewire.example-livewire-chart-demo'); } public function getData() { $data = []; // your data here $labels = []; // your labels here $this->datasets = [ 'datasets' => [ [ "label" => "User Registrations", "backgroundColor" => "rgba(38, 185, 154, 0.31)", "borderColor" => "rgba(38, 185, 154, 0.7)", "data" => $data ] ], 'labels' => $labels ]; } } ``` Legacy API ========== [](#legacy-api) The previous builder API is retained for applications upgrading to this major. It can be accessed through `app()->chartjs`, and the chart can be rendered directly with `{!! $chart->render() !!}`. ``` // Controller ExampleController.php $chart = app()->chartjs ->name('pieChartTest') ->type('pie') ->size(['width' => 400, 'height' => 200]) ->labels(['Label x', 'Label y']) ->datasets([ [ 'backgroundColor' => ['#FF6384', '#36A2EB'], 'hoverBackgroundColor' => ['#FF6384', '#36A2EB'], 'data' => [69, 59] ] ]) ->options([]); return view('example', compact('chart')); // Blade example.blade.php {!! $chart->render() !!} ``` Contributing ============ [](#contributing) Laravel Chart.js is community-maintained. Contributions from first-time and returning contributors are welcome: bug reproductions, documentation fixes, tests, accessibility improvements, and compatibility updates all help. Open an issue or discussion for design questions, or send a focused pull request for a well-understood change. Development =========== [](#development) ``` composer install npm ci npm run build composer check ``` `composer check` runs Pint, PHPStan and the Pest test suite. The committed `dist/chart.js` bundle is built from the versions locked in `package-lock.json`. License ======= [](#license) LaravelChartjs is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT). Provenance ========== [](#provenance) Some of the original logic was developed by Brian Faust. The package from which this version was forked was primarily developed and maintained by Felix Costa. Icehouse Ventures adopted stewardship in 2024 and maintains the project with its community of contributors. ### Health Score 70 — ExcellentBetter than 100% of packages Maintenance95 Actively maintained with recent releases Popularity51 Moderate usage in the ecosystem Community27 Small or concentrated contributor base Maturity88 Battle-tested with a long release history Bus Factor2 2 contributors hold 50%+ of commits 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 ~93 days Recently: every ~181 days Total 42 Last Release 20d ago Major Versions 1.3.4 → 2.0.02016-12-23 2.9.0 → 3.0.02023-02-23 v1.4 → v4.02024-09-10 v4.2 → v5.0.02026-07-29 PHP version history (3 changes)1.3.1PHP >=5.5.9 2.0.0PHP >=5.6.4 v5.0.0PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/8f9d6649a3cf5348d81ed3ebc90318f5a5ecedde304c0a74a8d67f891cffec1b?d=identicon)[peterthomson](/maintainers/peterthomson) --- Top Contributors [![fxcosta](https://avatars.githubusercontent.com/u/6624661?v=4)](https://github.com/fxcosta "fxcosta (88 commits)")[![peterjthomson](https://avatars.githubusercontent.com/u/9357736?v=4)](https://github.com/peterjthomson "peterjthomson (51 commits)")[![ian-patel](https://avatars.githubusercontent.com/u/9893863?v=4)](https://github.com/ian-patel "ian-patel (9 commits)")[![marcfowler](https://avatars.githubusercontent.com/u/1171131?v=4)](https://github.com/marcfowler "marcfowler (8 commits)")[![pjeutr](https://avatars.githubusercontent.com/u/611968?v=4)](https://github.com/pjeutr "pjeutr (7 commits)")[![jasonlbeggs](https://avatars.githubusercontent.com/u/25065083?v=4)](https://github.com/jasonlbeggs "jasonlbeggs (5 commits)")[![Damian89](https://avatars.githubusercontent.com/u/11396147?v=4)](https://github.com/Damian89 "Damian89 (2 commits)")[![Hayden-RM](https://avatars.githubusercontent.com/u/106127205?v=4)](https://github.com/Hayden-RM "Hayden-RM (2 commits)")[![edduu](https://avatars.githubusercontent.com/u/3751934?v=4)](https://github.com/edduu "edduu (2 commits)")[![rogermedico](https://avatars.githubusercontent.com/u/2758290?v=4)](https://github.com/rogermedico "rogermedico (2 commits)")[![emmerink](https://avatars.githubusercontent.com/u/5856414?v=4)](https://github.com/emmerink "emmerink (2 commits)")[![harry-fakir](https://avatars.githubusercontent.com/u/91042668?v=4)](https://github.com/harry-fakir "harry-fakir (2 commits)")[![LuizCristino](https://avatars.githubusercontent.com/u/33782549?v=4)](https://github.com/LuizCristino "LuizCristino (1 commits)")[![MaxGiting](https://avatars.githubusercontent.com/u/9828591?v=4)](https://github.com/MaxGiting "MaxGiting (1 commits)")[![maxwellyoung](https://avatars.githubusercontent.com/u/5732215?v=4)](https://github.com/maxwellyoung "maxwellyoung (1 commits)")[![pokke123](https://avatars.githubusercontent.com/u/8859033?v=4)](https://github.com/pokke123 "pokke123 (1 commits)")[![renato-moura-soleon](https://avatars.githubusercontent.com/u/267999688?v=4)](https://github.com/renato-moura-soleon "renato-moura-soleon (1 commits)")[![samuelterra22](https://avatars.githubusercontent.com/u/11915449?v=4)](https://github.com/samuelterra22 "samuelterra22 (1 commits)")[![amouillard](https://avatars.githubusercontent.com/u/1624973?v=4)](https://github.com/amouillard "amouillard (1 commits)")[![wells](https://avatars.githubusercontent.com/u/2041871?v=4)](https://github.com/wells "wells (1 commits)") --- Tags chartjschartsgraphslaravellaravelgraphschartjschartsicehouseventures ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/icehouse-ventures-laravel-chartjs/health.svg) ``` [![Health](https://phpackages.com/badges/icehouse-ventures-laravel-chartjs/health.svg)](https://phpackages.com/packages/icehouse-ventures-laravel-chartjs) ``` ### Alternatives [renatomarinho/laravel-page-speed Laravel Page Speed 2.5k1.7M11](/packages/renatomarinho-laravel-page-speed)[emargareten/inertia-modal Inertia Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps. 90157.6k](/packages/emargareten-inertia-modal)[forjedio/inertia-table Backend-driven dynamic tables for Laravel + Inertia.js 272.0k](/packages/forjedio-inertia-table)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.8k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)