PHPackages                             flakron/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. flakron/livewire-charts

ActiveLibrary[Utility & Helpers](/categories/utility)

flakron/livewire-charts
=======================

Livewire Charts

v12.0.0(1y ago)0422↓50%MITPHPPHP ^7.2|^7.3|^7.4|^8.0CI passing

Since Oct 19Pushed 1y agoCompare

[ Source](https://github.com/flakron/livewire-charts)[ Packagist](https://packagist.org/packages/flakron/livewire-charts)[ Docs](https://github.com/flakron/livewire-charts)[ RSS](/packages/flakron-livewire-charts/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)Dependencies (4)Versions (19)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 livewire-charts:install
```

This command will export a `vendor/livewire-charts` folder under the `public` directory of your app which is used by the `@livewireChartsScripts` directive. More on this topic later.

Requirements
------------

[](#requirements)

This package requires the following packages/libraries to work:

- `Laravel Livewire v3` ()
- `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)
- Radial Chart (`LivewireRadialChart` 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.
- `LivewireRadialChart` uses `RadialChartModel` to set up data bars, 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.

```

```

> Note: Optionally add "key" to enable props reactivity if needed 💪

Next, include the `@livewireChartsScripts` directive next to your other app scripts

```
@livewireScripts
@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();
LivewireCharts::radialChartModel();
```

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.

```
#[On('onColumnClick')]
public function handleOnColumnClick($event)
{
   // Handle event
}
```

"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 featuresetJsonConfig(array $config)Adds extra customization to charts by passing Apex charts properties keys and values. Nested keys must be added using dot (.) notation### 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()Displays columns horizontallysetVertical()Displays columns verticallymultiColumn()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 eventwithOnColumnClickEventName(string $eventName)Event Name that will be fired when a column of the chart is clicked### LivewirePieChart

[](#livewirepiechart)

MethodDescriptionsetOpacity(int $opacity)Sets slices' opacityasPie()Displays chart as pieasDonut()Displays chart as donutaddSlice(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 not### LivewireRadialChart

[](#livewireradialchart)

MethodDescriptionaddBar(string $title, double $value, string $color = null, array $extras = \[\])Adds a bar to the default serieswithOnBarClickEvent(string $eventName)Event Name that will be fired when a bar of the chart is clickedshowTotal()Show the total percetage to the graphhideTotal()Hides the total percetage to the graphAdvanced 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.

Advanced Usage - Custom Json Configs
------------------------------------

[](#advanced-usage---custom-json-configs)

The `setJsonConfig()` method on every chart allows adding custom Apex properties not provided first hand by the package. This means that any chart property supported by Apex chart can be passed down using this method.

```
$chart->setJsonConfig([
    'plotOptions.pie.startAngle' => -90,
    'plotOptions.pie.endAngle' => 90,
    'plotOptions.pie.offsetY' => 10,
    'grid.padding.bottom' => -180,
]);
```

> Note: If you want to add nested properties, you can use dot (.) notation for this matter.

You can even pass down simple JS functions. For example, for formatting you can pass down your own closure

```
$chart->setJsonConfig([
    'tooltip.y.formatter' => '(val) => `$${val} million dollars baby!`'
])
```

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

39

—

LowBetter than 85% of packages

Maintenance48

Moderate activity, may be stable

Popularity15

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 85.4% 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 ~107 days

Recently: every ~374 days

Total

16

Last Release

416d ago

Major Versions

1.5.2 → 2.0.02020-11-30

v2.4.1 → v11.0.02024-03-16

v11.0.0 → v12.0.02025-03-18

PHP version history (2 changes)1.0.0PHP ^7.2|^7.3|^7.4

v2.2.0PHP ^7.2|^7.3|^7.4|^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/23bab72e4b22c134c78d3f332d456de52205bab7bceb306a748888c342b00565?d=identicon)[flakron](/maintainers/flakron)

---

Top Contributors

[![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (123 commits)")[![flakron](https://avatars.githubusercontent.com/u/203035?v=4)](https://github.com/flakron "flakron (6 commits)")[![AlexHupe](https://avatars.githubusercontent.com/u/6893843?v=4)](https://github.com/AlexHupe "AlexHupe (4 commits)")[![syntaxlexx](https://avatars.githubusercontent.com/u/19994360?v=4)](https://github.com/syntaxlexx "syntaxlexx (4 commits)")[![nicko170](https://avatars.githubusercontent.com/u/9477420?v=4)](https://github.com/nicko170 "nicko170 (2 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (2 commits)")[![mokhosh](https://avatars.githubusercontent.com/u/6499685?v=4)](https://github.com/mokhosh "mokhosh (1 commits)")[![redsquirrelstudio](https://avatars.githubusercontent.com/u/46108903?v=4)](https://github.com/redsquirrelstudio "redsquirrelstudio (1 commits)")[![stijnvanouplines](https://avatars.githubusercontent.com/u/16742744?v=4)](https://github.com/stijnvanouplines "stijnvanouplines (1 commits)")

---

Tags

asantibanezlivewire-charts

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/flakron-livewire-charts/health.svg)

```
[![Health](https://phpackages.com/badges/flakron-livewire-charts/health.svg)](https://phpackages.com/packages/flakron-livewire-charts)
```

###  Alternatives

[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[asantibanez/livewire-calendar

Laravel Livewire calendar component

96883.3k1](/packages/asantibanez-livewire-calendar)[kirschbaum-development/commentions

A package to allow you to create comments, tag users and more

12369.2k](/packages/kirschbaum-development-commentions)[asantibanez/livewire-resource-time-grid

Laravel Livewire resource time grid component

2308.0k](/packages/asantibanez-livewire-resource-time-grid)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

116.6k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)