PHPackages                             larawire-garage/larapex-livewire - 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. larawire-garage/larapex-livewire

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

larawire-garage/larapex-livewire
================================

Laravel wrapper for ApexCharts javascript plugin advanced features with livewire

v2.0.0(1y ago)45.9k↓48.1%1[1 issues](https://github.com/LarawireGarage/larapex-livewire/issues)MITPHP

Since May 14Pushed 9mo ago1 watchersCompare

[ Source](https://github.com/LarawireGarage/larapex-livewire)[ Packagist](https://packagist.org/packages/larawire-garage/larapex-livewire)[ RSS](/packages/larawire-garage-larapex-livewire/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (7)DependenciesVersions (13)Used By (0)

Larapex Livewire
================

[](#larapex-livewire)

Laravel wrapper for [ApexCharts javascript plugin](https://apexcharts.com/) advanced features with livewire

> ### 👉 [Support Livewire 3](#livewire_3_section)
>
> [](#-support-livewire-3)
>
> ### 👉 [Support JS Callback Functions](#callback_section)
>
> [](#-support-js-callback-functions)
>
> ### 👉 [Support Light, Dark Themes](#theme_section)
>
> [](#-support-light-dark-themes)

**Installation**

```
composer require larawire-garage/larapex-livewire

```

**Publish configurations**

```
php artisan vendor:publish --tag=larapex-livewire-configs

```

**Publish assets**

```
php artisan vendor:publish --tag=larapex-livewire-assets

```

**Add Scripts**

add `@larapexScripts` blade directive end of the body tag and before other scripts in main app layout file

```
// layouts.app.blade.php

    @larapexScripts

        // your scripts

```

If you want to use chart only in sub pages or livewire component and need to push scripts to specific stack add stack name to script\_section in `larapex-livewire.php` config file

```
// layouts.app.blade.php

    @yield('scripts')

    @stack('lw_scripts')

```

```
// posts.stats.blade.php [normal or livewire component blade]

    @pushOnce('lw_scripts')
        @larapexScripts
    @endPushOnce

```

```
'script_section' => 'lw_scripts',

```

**Make a chart**

```
php artisan make:larapex YOUR_CHART_CLASS_NAME

```

and Select a Chart Type from

1. Area Chart
2. Bar Chart
3. Brush Chart
4. Donut Chart
5. Line Chart
6. Pie Chart

then its generate a chart class.

Fill Data
---------

[](#fill-data)

> Chart class is a normal livewire class and you can use livewire features inside the class. For example event\_listeners, parse value through mount() method etc.

Add data generating code in `dataSource()` function and use it to fill data in `build()` method.

```
private function dataSource(){
    // Data generating logic
}

public function build()
{
    $this->chart = (new WireableAreaChart($this->chart_id))
        ->addArea('sample-1', $this->dataSource());
}

```

Add chart to page
-----------------

[](#add-chart-to-page)

add chart like any other livewire component into the blade file

```

    @livewire('chart-class-name-in-slug-format')

```

> Use chart class namespace in dot notation and all in slug format for chart component name in `@livewire()` blade directive.
> example:
>  app/Http/Livewire/TestChart.php Class can use as 'test-chart'.
>  app/Http/Livewire/Charts/TestChart.php Class can use as 'charts.test-chart'.

Customize Chart
---------------

[](#customize-chart)

Can use any option except javascript callback functions as a array using `set` functions

- setChart()
- setColors()
- setDataLabels()
- setFill()
- setForecastDataPoints()
- setGrid()
- setLabels()
- setLegend()
- setMarkers()
- setNoData()
- setDataset()
- setStates()
- setStroke()
- setSubtitle()
- setTheme()
- setTitle()
- setTooltip()
- setPlotOptions()
- setXAxis()
- setYAxis()
- setAnnotations()

also ApexChart has few helper functions

- sparklineEnable(bool $enable)
- colors(array $colors)
- randomColors(int $limit)
- showDataLabels(bool $show)
- dataLabelsTextAnchor(string $anchor)
- dataLabelsStyles(array $styles)
- fillColors(array $colors)
- fillType(string $type)
- fillOpacity(float $opacity)
- fillSolid(array $colors)
- fillGradient(array $fromColors, array $toColors, array $others, string $shade, string $direction, array $colorStops, array $customStops)
- showGrid(bool $show)
- setGridInfo(array $info)
- labels(array $labels)
- markers(array $colors,int $width,int $hoverSize, array $others)
- noData($text, string $halign, string $valign, array $others)
- stroke(int $width, array $colors, string $curve, array $others)
- curve(string $curve)
- subtitle(string $subtitle, string $position, array $others)
- theme(string $mode, array $others)
- title(string $title, string $align, array $others)
- showTooltip(bool $show)
- tooltip(bool $show, string $theme, bool $fillSeriesColor, array $others)
- xAxis(array $categories, string $type, string $title, array $others)
- xAxisType(string $type)
- xAxisTickPlacement(string $placement)
- yAxis(bool $show, array $others)
- zoom(bool $enable, string $type, array $others)
- annotations(array $options)

**Overwrite configs**

- background(string $color)
- foreColor(string $color)
- fontFamily(string $fontFamily)
- height(string $height)
- width(string $width)

Livewire 3 Support
------------------

[](#livewire-3-support)

==================== **New Chart Events** ====================

- `refresh:chart` *- update only data series*
- `update:chart:options` *- update all options **`Experimental`***
- `reset:chart` *- reset zoom etc. **`Experimental`***
- `delete:chart` *- remove chart element from DOM*

> ### This events Simple Chart & Brush Chart both supported.
>
> [](#this-events-simple-chart--brush-chart-both-supported)

**Usage :**

```
$this->dispatch('refresh:chart', ['min' => rand(1, 5), 'max' => rand(1, 30)])->to(MyChart::class);
$this->dispatch('update:chart:options')->to(MyChart::class);
$this->dispatch('reset:chart')->to(MyChart::class);
$this->dispatch('delete:chart')->to(MyChart::class);

```

Js Callback Function Support
----------------------------

[](#js-callback-function-support)

If you need to add custom callback functions for something like formatters, you can use `jsCallback()` function. In `jsCallback()` function first Parameter is array key path in dot notation. And JS Callback function string needs to pass as second parameter.

```
public function jsCallback($key, $jsFunc)

```

> You can also use `heredoc syntax` and `nowdoc syntax` instead of regular string when defined js function

**Usage :**

****```
$this->chart = (new WireableAreaChart($this->chart_id))
            ->addArea('sample-1', $this->dataSource())

            /**
             * using String
             */
            ->jsCallback('dataLabels.formatter', "function (val, opts) {
                        return val + 'X'
            }")

             /**
             * using heredoc
             */
            ->jsCallback('yaxis.labels.formatter',