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 v4.2(1y ago)117186.4k—8.9%14[6 issues](https://github.com/icehouse-ventures/laravel-chartjs/issues)[5 PRs](https://github.com/icehouse-ventures/laravel-chartjs/pulls)MITPHPPHP >=5.6.4CI passing Since Jan 12Pushed 9mo 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 1mo ago READMEChangelog (10)Dependencies (6)Versions (45)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](http://www.chartjs.org/) library. 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 ``` For older versions of Laravel (8 and below), add the Service Provider in your file config/app.php: ``` IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider::class ``` 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 Chartjs --------------------- [](#2-installing-chartjs) Next, you can install and add to your layouts / templates the Chartjs library that can be easily found for download at: 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, you can easily set the delivery method to 'CDN' in the config\\chartjs.php settings, this will load the specified Chartjs files via an external content delivery network. Chartjs versions 2, 3 and 4 are available by CDN. These also load Moment.js and Numeral.js which are commonly needed for business charts. 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 Chartjs version 4 assets php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --force --tag="assets" // Publish Chartjs version 3 assets php artisan vendor:publish --provider="IcehouseVentures\LaravelChartjs\Providers\ChartjsServiceProvider" --force --tag="assets-v3" // Publish Chartjs 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 to install Chartjs in a web application is to include it in your normal JavaScript and/or CSS bundle pipeline using NPM, Laravel Mix or Vite. For instructions on this method of installation please visit: If you do not currently have a JavaScript package manager installed, the other delivery methods are helpful until you need one. 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() ->type() ->labels() ->datasets() ->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. 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 string format raw options to the chart like a json: ``` $chart->optionsRaw("{ scales: { x: { title: { display: true, text: 'X Axis Title', } } }, plugins: { title: { display: true, text: 'Chart Title', font: { size: 16 } }, legend: { display: false, }, } }"); ``` 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 has support for dynamic live updating charts in Livewire. See the [demo repo](https://github.com/icehouse-ventures/laravel-chartjs-demo) Note that the conventions for passing props to Livewire (such as declaring public properties or adding attributes to a function may vary for your Livewire version. ``` // 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 Support ============== [](#legacy-support) This package also supports older versions of Laravel and Chartjs. The previous syntax for building charts is still supported and can be accessed via the `app()->chartjs` method. The previous blade rendering syntax is also still supported, and can be accessed via the `{{ $chart->render() }}` directive. The legacy syntax is particularly useful for migrating to this package from the previous versions of this package. ``` // 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() !!} ``` Issues ====== [](#issues) This README, as well as the package, is in development, but will be constantly updated, and we will keep you informed. Any questions or suggestions preferably open a discussion first before creating an issue. License ======= [](#license) LaravelChartjs is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT). Provenance ========== [](#provenance) Some of the original logic for this package was originally developed by Brian Faust. The main package from which this current version of the package is forked was primarily developed and maintained by Felix Costa. In 2024, the package was adopted by Icehouse Ventures which is an early-stage venture capital firm based in New Zealand. We use Chartjs heavily in our Laravel applications and want to give back to the Laravel community by making Chartjs fast and easy to implement across all major versions and to streamline the upgrade path. ### Health Score 53 — FairBetter than 97% of packages Maintenance50 Moderate activity, may be stable Popularity51 Moderate usage in the ecosystem Community26 Small or concentrated contributor base Maturity71 Established project with proven stability 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 ~83 days Recently: every ~59 days Total 41 Last Release 444d 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 PHP version history (2 changes)1.3.1PHP >=5.5.9 2.0.0PHP >=5.6.4 ### 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 (44 commits)")[![ian-patel](https://avatars.githubusercontent.com/u/9893863?v=4)](https://github.com/ian-patel "ian-patel (8 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)")[![edduu](https://avatars.githubusercontent.com/u/3751934?v=4)](https://github.com/edduu "edduu (2 commits)")[![Damian89](https://avatars.githubusercontent.com/u/11396147?v=4)](https://github.com/Damian89 "Damian89 (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)")[![LorenzoSapora](https://avatars.githubusercontent.com/u/25519274?v=4)](https://github.com/LorenzoSapora "LorenzoSapora (1 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)")[![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)")[![elyerinhaughie](https://avatars.githubusercontent.com/u/33913289?v=4)](https://github.com/elyerinhaughie "elyerinhaughie (1 commits)")[![flemzord](https://avatars.githubusercontent.com/u/1952914?v=4)](https://github.com/flemzord "flemzord (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 [barryvdh/laravel-ide-helper Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion. 14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[akaunting/laravel-apexcharts ApexCharts package for Laravel 84288.3k2](/packages/akaunting-laravel-apexcharts)[laravel-enso/charts Server-side data builder for Chart.js, with a VueJS component for the frontend. 1761.1k7](/packages/laravel-enso-charts)[epessine/axis Draw charts with a simple API on Laravel 265.6k](/packages/epessine-axis)[icehouse-ventures/laravel-mermaid Simple package to generate diagrams in Laravel using the Mermaid.js library 2630.0k](/packages/icehouse-ventures-laravel-mermaid)[interaction-design-foundation/laravel-geoip Support for multiple Geographical Location services. 17221.0k3](/packages/interaction-design-foundation-laravel-geoip) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)