PHPackages                             helvetiapps/lagoon-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. helvetiapps/lagoon-charts

Abandoned → [helvetitec/lagoon-charts](/?search=helvetitec%2Flagoon-charts)Library[Utility & Helpers](/categories/utility)

helvetiapps/lagoon-charts
=========================

Google Charts for Laravel Livewire 3

v2.2.4(1y ago)1631[2 issues](https://github.com/Helvetitec/lagoon-charts/issues)GPL-3.0PHP

Since Dec 6Pushed 1y ago2 watchersCompare

[ Source](https://github.com/Helvetitec/lagoon-charts)[ Packagist](https://packagist.org/packages/helvetiapps/lagoon-charts)[ RSS](/packages/helvetiapps-lagoon-charts/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (26)Used By (0)

Lagoon Charts
=============

[](#lagoon-charts)

[Google Charts](https://developers.google.com/chart/interactive/docs) for Laravel [Livewire](https://laravel-livewire.com/)

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

[](#requirements)

- Laravel 9+
- Livewire 3+

Installation
------------

[](#installation)

Run composer:

```
composer require helvetitec/lagoon-charts:~2.0

```

For Livewire 2:

```
composer require helvetitec/lagoon-charts:~1.0

```

Included Charts
---------------

[](#included-charts)

- Area Charts
- Bar Charts
- Candlestick Charts
- Column Charts
- Line Charts
- Pie Charts
- Waterfall Charts
- Timelines
- Gantt Charts
- Other Charts

Included Functions
------------------

[](#included-functions)

- Actions
- Events (Selected, Ready, Error)
- Darkmode (Can be manually set if you set the 'viewMode' to 'light' to enable lightmode or 'dark' to enable darkmode
- Automatic Darkmode (Would be nice if it would be automatically set)
- Custom Tooltips
- HTML Tooltips

Usage
-----

[](#usage)

### Prepare View

[](#prepare-view)

Important, since Version 2.2 you will need to add @lagoonScripts and @lagoonStyles to your layouts!

Add Styles:

```
@lagoonStyles
```

CoreCharts:

```
@lagoonScripts('en')
@lagoonScripts({{ app()->getLocale() }})
```

Gantt Charts:

```
@lagoonScripts('en', 'gantt')
@lagoonScripts('en', ['corechart', 'gantt'])
```

Timeline Charts:

```
@lagoonScripts('en', 'timeline')
@lagoonScripts('en', ['corechart', 'timeline'])
```

### Pie Chart

[](#pie-chart)

Livewire

```
$pieChartTable = new \Helvetitec\LagoonCharts\DataTables\PieChartTable();
$pieChartTable->addRow("Row1", 20);
$pieChartTable->addRow("Row2", 30);
$data = $pieChartTable->toArray();
```

Blade

```
@livewire('lagoon-pie-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'title' => 'Title', 'width' => 400, 'height' => 200, 'column1' => 'Col1Label', 'column2' => 'Col2Label'], key('uniqueKey'.now()))

```

### Line Chart

[](#line-chart)

Livewire

```
$lineChartTable = new \Helvetitec\LagoonCharts\DataTables\LineChartTable('xAxis', ['yAxis1', 'yAxis2']);
$lineChartTable->addRow([1, 100, 200]);
$lineChartTable->addRow([2, 200, 100]);
$data = $lineChartTable->toArray();
```

Blade

```
@livewire('lagoon-line-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

```

### Candlestick Chart

[](#candlestick-chart)

Livewire

```
$candlestickChartTable = new \Helvetitec\LagoonCharts\DataTables\CandlestickChartTable();
$candlestickChartTable->addRow([1, 100, 200]);
$candlestickChartTable->addRow([2, 200, 100]);
$data = $candlestickChartTable->toArray();
```

Blade

```
@livewire('lagoon-candlestick-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

```

### Waterfall Chart

[](#waterfall-chart)

Livewire

```
$waterfallChartTable = new \Helvetitec\LagoonCharts\DataTables\WaterfallChartTable();
$waterfallChartTable->addRow("Mon", 100, 200);
$waterfallChartTable->addRow("Tue", 200, 300);
$data = $waterfallChartTable->toArray();
```

Blade

```
@livewire('lagoon-waterfall-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

```

### Bar Chart

[](#bar-chart)

Livewire

```
$barChartTable = new \Helvetitec\LagoonCharts\DataTables\BarChartTable('xAxis', ['yAxis1', 'yAxis2']);
$barChartTable->addRow([1, 100, 200]);
$barChartTable->addRow([2, 200, 100]);
$data = $barChartTable->toArray();
```

Blade

```
@livewire('lagoon-bar-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

```

### Column Chart

[](#column-chart)

Livewire

```
$columnChartTable = new \Helvetitec\LagoonCharts\DataTables\ColumnChartTable('xAxis', ['yAxis1', 'yAxis2']);
$columnChartTable->addRow([1, 100, 200]);
$columnChartTable->addRow([2, 200, 100]);
$data = $columnChartTable->toArray();
```

Blade

```
@livewire('lagoon-column-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

```

### Area Chart

[](#area-chart)

Livewire

```
$areaChartTable = new \Helvetitec\LagoonCharts\DataTables\AreaChartTable('xAxis', ['yAxis1', 'yAxis2']);
$areaChartTable->addRow([1, 100, 200]);
$areaChartTable->addRow([2, 200, 100]);
$data = $areaChartTable->toArray();
```

Blade

```
@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

```

### Gantt Chart

[](#gantt-chart)

Livewire

```
$ganttChartTable = new GanttChartTable();

$ganttChartTable->addTask("test1", "Test1", Carbon::now(), Carbon::now()->copy()->addMonth(), 30, 100, null);
$ganttChartTable->addTask("test2", "Test2", Carbon::now()->copy()->addMonth(), Carbon::now()->copy()->addMonths(2), 30, 100, "test1");

$data = $ganttChartTable->__toString(); //IMPORTANT USE __toString() here!
```

Blade

```
@livewire('lagoon-gantt-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'options' => []], key('uniquekey'.now()))

```

### Timeline

[](#timeline)

Livewire

```
$timelineTable = new TimelineTable(true); //The parameter sets if the hours, minutes and seconds should be included in the date

$timelineTable->addTask("Person 1", "Project 1", Carbon::now(), Carbon::now()->copy()->addHour());
$timelineTable->addTask("Person 2", "Project 1", Carbon::now()->copy()->addHour(), Carbon::now()->copy()->addHours(2));

$data = $timelineTable->__toString(); //IMPORTANT USE __toString() here!
```

Blade

```
@livewire('lagoon-timeline', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'options' => []], key('uniquekey'.now()))

```

### Add options to the Charts

[](#add-options-to-the-charts)

You can add options with the 'options' => \['option1' => 'something'\] variable. You can add all options that are inside the respective Google Chart.

Blade

```
@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => ['backgroundColor' => 'black']], key('uniquekey'.now()))

```

### Add link to Chart PNG

[](#add-link-to-chart-png)

You can add a link to a PNG from the chart by adding 'printable' => true, this does only work with corecharts!

Blade

```
@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], 'printable' => true], key('uniquekey'.now()))

```

### Using Actions

[](#using-actions)

You can use actions inside the charts by adding the SwitchAction object.

PHP

```
$switchAction = new \Helvetitec\LagoonCharts\Actions\SwitchAction("action", "Test Action");

$switchAction->addAction("alert('hello world!');"); //Adds a single javascript action to the list (starting at index 0)

$switchAction->addActionAt(0, "alert('hello world, again!');"); //Adds a single javascript action to a specific index

$switchStr = $switchAction->__toString();

$actions = [
    $switchStr
];
```

Blade

```
@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], 'actions' => $actions], key('uniquekey'.now()))

```

### Using Events

[](#using-events)

You can use events inside the charts to interact with the charts and the data within

PHP

```
$readyEvent = new \Helvetitec\LagoonCharts\Utils\Event(\Helvetitec\LagoonCharts\Utils\EventType::Ready, "alert('hello, i\'m ready');");

//The error event will include an err variable
$errorEvent = new \Helvetitec\LagoonCharts\Utils\Event(\Helvetitec\LagoonCharts\Utils\EventType::Error, "alert('ops!' + err);");

//The select event will include a selection variable, which represents chart.getSelection();
$selectEvent = new \Helvetitec\LagoonCharts\Utils\Event(\Helvetitec\LagoonCharts\Utils\EventType::Select, "alert(selection[0][0]);");

$eventArr = [
    'ready' => $readyEvent->__toString(),
    'error' => $errorEvent->__toString(),
    'select' => $selectEvent->__toString()
];
```

Blade

```
@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], 'events' => $eventArr], key('uniquekey'.now()))

```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~32 days

Recently: every ~118 days

Total

23

Last Release

537d ago

Major Versions

v0.2.4 → v1.02023-07-22

v1.0 → v2.x-dev2023-08-06

### Community

Maintainers

![](https://www.gravatar.com/avatar/2f366058ff9e06fad5c432234f0ac35a154bcc4153dbff096987489b16e87eb7?d=identicon)[daredloco](/maintainers/daredloco)

---

Top Contributors

[![daredloco](https://avatars.githubusercontent.com/u/60240491?v=4)](https://github.com/daredloco "daredloco (145 commits)")

### Embed Badge

![Health badge](/badges/helvetiapps-lagoon-charts/health.svg)

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

PHPackages © 2026

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