PHPackages arqs-ghb/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. [Utility & Helpers](/categories/utility) 4. / 5. arqs-ghb/livewire-charts ActiveLibrary[Utility & Helpers](/categories/utility) arqs-ghb/livewire-charts ======================== Livewire Charts fork 04PHP Since Nov 1Pushed 3y agoCompare [ Source](https://github.com/arqs-ghb/livewire-charts)[ Packagist](https://packagist.org/packages/arqs-ghb/livewire-charts)[ RSS](/packages/arqs-ghb-livewire-charts/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) [![GitHub release](https://camo.githubusercontent.com/8a7d060d37fb84c9d751986ec7b44f3be359b2e5360804864ce6a2363fd0d2ec/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6173616e746962616e657a2f6c697665776972652d6368617274732e737667)](https://github.com/asantibanez/livewire-charts/releases/) [![Livewire Charts](https://camo.githubusercontent.com/bd2bb1c5e719979335e4b969dbb0ba19ad9fc21b8c33206f80c33eb734a69c32/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c697665776972652532304368617274732e706e673f7468656d653d6c69676874267061636b6167654e616d653d6173616e746962616e657a2532466c697665776972652d636861727473267061747465726e3d67726170685061706572267374796c653d7374796c655f31266465736372697074696f6e3d4e6561742b4c697665776972652b4368617274732b666f722b796f75722b4c61726176656c2b70726f6a65637473266d643d3126666f6e7453697a653d313030707826696d616765733d63686172742d7371756172652d626172)](https://camo.githubusercontent.com/bd2bb1c5e719979335e4b969dbb0ba19ad9fc21b8c33206f80c33eb734a69c32/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c697665776972652532304368617274732e706e673f7468656d653d6c69676874267061636b6167654e616d653d6173616e746962616e657a2532466c697665776972652d636861727473267061747465726e3d67726170685061706572267374796c653d7374796c655f31266465736372697074696f6e3d4e6561742b4c697665776972652b4368617274732b666f722b796f75722b4c61726176656c2b70726f6a65637473266d643d3126666f6e7453697a653d313030707826696d616765733d63686172742d7371756172652d626172) Preview ------- [](#preview) [![preview](https://github.com/asantibanez/livewire-charts/raw/master/preview.gif)](https://github.com/asantibanez/livewire-charts/raw/master/preview.gif)[![preview](./preview_radarchart.gif)](./preview_radarchart.gif) Demo ---- [](#demo) Installation ------------ [](#installation) You can install the package via composer: ``` composer require asantibanez/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 ``` > Note: This last step can also be done using `livewire-charts:install` command in the artisan console. 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) - Radar Chart (`LivewireRadarChart` component) - Tree Map Chart (`LivewireTreeMapChart` 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. - `LivewireRadarChart` uses `RadarChartModel` to set up data points, events and other ui customizations. - `LivewireTreeMapChart` uses `TreeMapChartModel` to set up data blocks, 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/asantibanez/livewire-charts/raw/master/column-chart-example.png)](https://github.com/asantibanez/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(); LivewireCharts::radarChartModel(); LivewireCharts::treeMapChartModel(); ``` 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/asantibanez/livewire-charts/raw/master/reactive-charts-example.gif)](https://github.com/asantibanez/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 labels### LivewireRadarChart [](#livewireradarchart) MethodDescriptionaddSeries(string $seriesName, string $title, double $value, array $extras = \[\])withOnPointClickEvent(string $eventName)Event Name that will be fired when a point of the chart is clicked### LivewireTreeMapChart [](#livewiretreemapchart) MethodDescriptionaddBlock(string $title, double $value, array $extras = \[\])Adds a block to the default seriesaddSeriesBlock(string $seriesName, string $title, double $value, array $extras = \[\])Adds a block to the specified serieswithOnBlockClickEvent(string $eventName)Event Name that will be fired when a block of the chart is clickedsetDistributed(bool $distributed)Set whether the chart uses distribution or notAdvanced 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/asantibanez) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 15 — LowBetter than 3% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity3 Limited adoption so far Community11 Small or concentrated contributor base Maturity24 Early-stage or recently created project Bus Factor1 Top contributor holds 88.6% 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/0861353008064b505831a7c6ffa7c1a5b26fdf84f924ba0c7c7be3cb95e90ae6?d=identicon)[arqsmatheus](/maintainers/arqsmatheus) --- Top Contributors [![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (78 commits)")[![AlexHupe](https://avatars.githubusercontent.com/u/6893843?v=4)](https://github.com/AlexHupe "AlexHupe (4 commits)")[![matheusloureiro13](https://avatars.githubusercontent.com/u/62028817?v=4)](https://github.com/matheusloureiro13 "matheusloureiro13 (3 commits)")[![nicko170](https://avatars.githubusercontent.com/u/9477420?v=4)](https://github.com/nicko170 "nicko170 (2 commits)")[![mokhosh](https://avatars.githubusercontent.com/u/6499685?v=4)](https://github.com/mokhosh "mokhosh (1 commits)") ### Embed Badge ![Health badge](/badges/arqs-ghb-livewire-charts/health.svg) ``` [![Health](https://phpackages.com/badges/arqs-ghb-livewire-charts/health.svg)](https://phpackages.com/packages/arqs-ghb-livewire-charts) ``` ### Alternatives [laracademy/generators This package will generate a Laravel Model based on your database table itself, filling in the required fields automatically. 355346.4k4](/packages/laracademy-generators)[beyondcode/laravel-vouchers Allow users to redeem vouchers that are bound to models.. 70763.4k2](/packages/beyondcode-laravel-vouchers)[sixlive/nova-text-copy-field Laravel Nova text field with click to copy support 70708.2k2](/packages/sixlive-nova-text-copy-field)[happyr/message-serializer Serialize classes the good way. 80491.3k](/packages/happyr-message-serializer)[percymamedy/laravel-dev-booter Boost your Laravel app by registering Prod services only on Prod. 35320.7k1](/packages/percymamedy-laravel-dev-booter)[h4kuna/number-format Object wrapper above number\_format 1889.3k2](/packages/h4kuna-number-format) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)