PHPackages aabosham/livewire-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. aabosham/livewire-charts ActiveLibrary aabosham/livewire-charts ======================== Livewire Charts v1.0.1(4y ago)1125MITPHPPHP ^7.2|^7.3|^7.4|^8.0 Since Mar 25Pushed 4y ago2 watchersCompare [ Source](https://github.com/AAbosham/livewire-charts)[ Packagist](https://packagist.org/packages/aabosham/livewire-charts)[ Docs](https://github.com/aabosham/livewire-charts)[ RSS](/packages/aabosham-livewire-charts/feed)WikiDiscussions master Synced today READMEChangelog (2)Dependencies (4)Versions (3)Used By (0) [![GitHub release](https://camo.githubusercontent.com/92e451550e011e24c5b389d1568459f5b822a0ce046ef9493e3f34186f95f1ed/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6161626f7368616d2f6c697665776972652d6368617274732e737667)](https://github.com/aabosham/livewire-charts/releases/) [![Livewire Charts](https://camo.githubusercontent.com/c0032d19d793cf205391abce625d3366860ef1ebc348a6bf6c5d78c2bf45f5e6/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c697665776972652532304368617274732e706e673f7468656d653d6c69676874267061636b6167654e616d653d6161626f7368616d2532466c697665776972652d636861727473267061747465726e3d67726170685061706572267374796c653d7374796c655f31266465736372697074696f6e3d4e6561742b4c697665776972652b4368617274732b666f722b796f75722b4c61726176656c2b70726f6a65637473266d643d3126666f6e7453697a653d313030707826696d616765733d63686172742d7371756172652d626172)](https://camo.githubusercontent.com/c0032d19d793cf205391abce625d3366860ef1ebc348a6bf6c5d78c2bf45f5e6/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c697665776972652532304368617274732e706e673f7468656d653d6c69676874267061636b6167654e616d653d6161626f7368616d2532466c697665776972652d636861727473267061747465726e3d67726170685061706572267374796c653d7374796c655f31266465736372697074696f6e3d4e6561742b4c697665776972652b4368617274732b666f722b796f75722b4c61726176656c2b70726f6a65637473266d643d3126666f6e7453697a653d313030707826696d616765733d63686172742d7371756172652d626172) Preview ------- [](#preview) [![preview](https://github.com/aabosham/livewire-charts/raw/master/preview.gif)](https://github.com/aabosham/livewire-charts/raw/master/preview.gif) Demo ---- [](#demo) Installation ------------ [](#installation) You can install the package via composer: ``` composer require aabosham/livewire-charts ``` Next, you must export the package public scripts. To do this run `php artisan vendor:publish`and export `livewire-charts:public`. This command will export a `vendor/livewire-charts` folder under the `public` directory of your app. ``` php artisan vendor:publish --tag=livewire-charts:public ``` Requirements ------------ [](#requirements) This package requires the following packages/libraries to work: - `Laravel Livewire v2` () - `Alpine Js` () - `Apex Charts` () Please follow each package/library instructions on how to set them properly in your project. > Note: At the moment, `Apex Charts` is only supported for drawing charts. Usage ----- [](#usage) Livewire Charts supports out of the box the following types of charts - Line/Multi Line Chart (`LivewireLineChart` component) - Pie Chart (`LivewirePieChart` component) - Column/Multi Line Chart (`LivewireColumnChart` component) - Area Chart (`LivewireAreaChart` component) Each one comes with its own "model" class that allows you to define the chart's data and render behavior. - `LivewireLineChart` uses `LineChartModel` to set up data points, markers, events and other ui customizations. - `LivewirePieChart` uses `PieChartModel` to set up data slices, events and other ui customizations. - `LivewireColumnChart` uses `ColumnChartModel` to set up data columns, events and other ui customizations. - `LivewireAreaChart` uses `AreaChartModel` to set up data points, events and other ui customizations. For example, to render a column chart, we can create an instance of `ColumnChartModel` and add some data to it ``` $columnChartModel = (new ColumnChartModel()) ->setTitle('Expenses by Type') ->addColumn('Food', 100, '#f6ad55') ->addColumn('Shopping', 200, '#fc8181') ->addColumn('Travel', 300, '#90cdf4') ; ``` > Note: Chart model methods are chainable 💪 With `$columnChartModel` at hand, we pass it to our `LivewireColumnChart` component in our Blade template. ``` ``` Next, include the `@livewireChartsScripts` directive next to your other app scripts ``` @livewireChartsScripts ``` And that's it! You have a beautiful rendered chart in seconds. 👌 [![column chart example](https://github.com/aabosham/livewire-charts/raw/master/column-chart-example.png)](https://github.com/aabosham/livewire-charts/raw/master/column-chart-example.png) > Note: You can use these charts inside other Livewire components too. Just render them in your Blade template and you are good to go. 👍 LivewireCharts facade --------------------- [](#livewirecharts-facade) Chart models can also be created using the `LivewireCharts` facade. ``` LivewireCharts::lineChartModel(); LivewireCharts::multiLineChartModel(); LivewireCharts::columnChartModel(); LivewireCharts::multiColumnChartModel(); LivewireCharts::pieChartModel(); LivewireCharts::areaChartModel(); ``` Enabling Interactions --------------------- [](#enabling-interactions) To enable click events, you must use the `with[XXX]ClickEvent($eventName)` method present in every model class and define a custom `$eventName` that will be fired with the corresponding data when a column/marker/slice is clicked. ``` $columnChartModel = (new ColumnChartModel()) ->setTitle('Expenses by Type') ->withOnColumnClickEventName('onColumnClick') ; ``` Here we define an `onColumnClick` event that will be fired when a column is clicked in our chart. We can listen to the `onClickEvent` registering a listener in any other Livewire component. ``` protected $listeners = [ 'onColumnClick' => 'handleOnColumnClick', ]; ``` "Reactive" Charts ----------------- [](#reactive-charts) You can use livewire-charts components as nested components in you Livewire components. Once rendered, charts will not automatically react to changes in the `$model` passed in. This is just how Livewire works. However, to enable "reactivity" when data passed in changes, you can define a special `$key`to your components so they are fully re-rendered each time the chart data changes. Each model class comes with a `reactiveKey()` method that returns a string based on its data. If any of the properties are changed, this key will update accordingly and re-render the chart again. In the following example, a parent component houses both column chart and pie chart and defines a `$model` for each one. The parent component renders the charts as follows ``` ``` When the parent component changes their respective models, charts will automatically re-render itself. [![reactive charts example](https://github.com/aabosham/livewire-charts/raw/master/reactive-charts-example.gif)](https://github.com/aabosham/livewire-charts/raw/master/reactive-charts-example.gif) Charts API ---------- [](#charts-api) For each chart, a specific model class needs to be used. Here, it is detailed the api available for each type of chart. #### All [](#all) MethodDescriptionsetTitle(string $title)Sets chart titlesetAnimated(boolean $animated)Enables/disables animationsetDataLabelsEnabled(boolean $enabled)Enables/disables data labelswithDataLabels()Enables data labelswithoutDataLabels()Disables data labelswithLegend()Shows legendswithoutLegend()Hides legendssetColors(array $colors)Set colors for chartaddColors(string $color)Append $color to $colors setsetXAxisCategories(array $categories)Enables custom categories for chart X Axissparklined()Enables Apex Charts sparkline featuresetSparklineEnabled(boolean $isEnabled)Enables/Disables Apex Charts sparkline feature#### LivewireLineChart [](#livewirelinechart) MethodDescriptionmultiLine()Adds multiline support for line chartsingleLine()Adds single support for line chartaddPoint(string $title, double $value, array $extras = \[\])Adds a point to a single line chart. `$extras` is forwarded on click eventaddSeriesPoint(string $seriesName, string $title, double $value, array $extras = \[\])Adds a point to series to a multi line chart. `$extras` is forwarded on click eventaddMarker(string $title, double $value)Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart (singleLine only)withOnPointClickEvent(string $eventName)Event Name that will be fired when a point/marker of the chart is clicked#### LivewireColumnChart [](#livewirecolumnchart) MethodDescriptionsetOpacity(int $opacity)Sets columns' opacitysetColumnWidth(int $columnWidth)Sets columns' widthsetHorizontal(boolean $value)Sets columns or barsmultiColumn()Sets chart to display multiple column seriessingleColumn()Sets chart to display a single column seriesstacked()Sets chart to display column series stackedaddColumn(string $title, double $value, string $color, array $extras = \[\])Adds a column to the chart with the specified color. `$extras` is forwarded on click eventaddSeriesColumn(string $seriesName, string $title, double $value, array $extras = \[\])Adds a column to a multicolumn chart. `$extras` is forwarded on click eventonColumnClickEventName(string $eventName)Event Name that will be fired when a column of the chart is clicked#### LivewirePieChart [](#livewirepiechart) MethodDescriptionsetOpacity(int $opacity)Sets slices' opacityaddSlice(string $title, double $value, string $color, array $extras = \[\])Adds a slice to the chart with the specified color. `$extras` is forwarded on click eventwithOnSliceClickEvent(string $eventName)Event Name that will be fired when a column of the chart is clicked#### LivewireAreaChart [](#livewireareachart) MethodDescriptionaddPoint(string $title, double $value, array $extras = \[\])Adds a point to the area chart. `$extras` is forwarded on click eventwithOnPointClickEvent(string $eventName)Event Name that will be fired when a point of the chart is clickedsetXAxisVisible(boolean $visible)Shows/hides xAxis labelssetYAxisVisible(boolean $visible)Shows/hides yAxis labelsAdvanced Usage - Integrating Scripts ------------------------------------ [](#advanced-usage---integrating-scripts) The directive `@livewireChartsScripts` adds a `script` tag that includes `public/vendor/livewire-charts/app.js`. If you want to include this script in your build system, you can export the package scripts with `php artisan vendor:publish` and selecting `livewire-charts:scripts`. This will export `js/vendor/livewire-charts`inside your resources folder. You can then adjust imports as you see fit in your project. > Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system. Troubleshooting --------------- [](#troubleshooting) Chart components must be placed inside a container with fixed height. This is because the chart will use all the given vertical space. A fixed height is needed to render properly. ``` ``` > Note: if a fixed height is not given, the chart will grow vertically infinitely. That's not what we want, right? Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. ### Security [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Andrés Santibáñez](https://github.com/aabosham) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 27 — LowBetter than 49% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community10 Small or concentrated contributor base Maturity58 Maturing project, gaining track record Bus Factor1 Top contributor holds 80% 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 ~383 days Total 2 Last Release 1488d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/67c34ab5836206d1896bdac1432480b1e9ba7225e9e2adfb44b821b472c59e1c?d=identicon)[AAbosham](/maintainers/AAbosham) --- Top Contributors [![AAbosham](https://avatars.githubusercontent.com/u/12083600?v=4)](https://github.com/AAbosham "AAbosham (4 commits)")[![ahmed-abobaker](https://avatars.githubusercontent.com/u/5080236?v=4)](https://github.com/ahmed-abobaker "ahmed-abobaker (1 commits)") --- Tags livewire-chartsaabosham ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/aabosham-livewire-charts/health.svg) ``` [![Health](https://phpackages.com/badges/aabosham-livewire-charts/health.svg)](https://phpackages.com/packages/aabosham-livewire-charts) ``` ### Alternatives [asantibanez/livewire-charts Livewire Charts 896960.0k5](/packages/asantibanez-livewire-charts)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[kirschbaum-development/commentions A package to allow you to create comments, tag users and more 12369.2k](/packages/kirschbaum-development-commentions)[calebdw/larastan-livewire A Larastan / PHPStan extension for Livewire. 43482.4k3](/packages/calebdw-larastan-livewire)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid)[a2insights/filament-saas Filament Saas for A2Insights 161.1k](/packages/a2insights-filament-saas) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)