PHPackages                             sadam/tayo - 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. [Admin Panels](/categories/admin)
4. /
5. sadam/tayo

ActiveLibrary[Admin Panels](/categories/admin)

sadam/tayo
==========

A Laravel package for creating interactive charts using Livewire, Alpine.js, and D3.js.

v1.1.1(3mo ago)025MITJavaScriptPHP ^8.1CI passing

Since Feb 27Pushed 3mo agoCompare

[ Source](https://github.com/sadamegal/Tayo)[ Packagist](https://packagist.org/packages/sadam/tayo)[ RSS](/packages/sadam-tayo/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (1)Dependencies (5)Versions (3)Used By (0)

Tayo
====

[](#tayo)

[![Tests](https://github.com/sadamegal/Tayo/actions/workflows/tests.yml/badge.svg)](https://github.com/sadamegal/Tayo/actions/workflows/tests.yml)[![Latest Version](https://camo.githubusercontent.com/c3d3ff6002311f098b7d90d9d7d3deb8501698ef76b13e796b77dce0140df137/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736164616d2f7461796f2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sadam/tayo)[![PHP Version](https://camo.githubusercontent.com/379ded3a893268d029fe5ca844a496ee3865edd241a06c75cd42811bb4fed0ac/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f736164616d2f7461796f2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sadam/tayo)[![License](https://camo.githubusercontent.com/b3ccff0bfaac38c3f7f43ee44b8f0cec49c5d5016870e5fa31578d7b8b3a5826/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f736164616d2f7461796f2e7376673f7374796c653d666c61742d737175617265)](LICENSE)

Tayo provides interactive chart components for Laravel Livewire. Charts are defined entirely in PHP and Blade — no JavaScript configuration required.

Check out the [Demo](https://tayo.sadam.ca/demo)

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

[](#requirements)

VersionPHP^8.1Laravel^10.0 | ^11.0 | ^12.0Livewire^3.0 | ^4.0Installation
------------

[](#installation)

```
composer require sadam/tayo
```

The package registers itself via Laravel's package auto-discovery. No additional setup is required.

Basic Usage
-----------

[](#basic-usage)

Render a chart by passing a `type` and `data` to the component:

```

```

With a title, subtitle, and colour palette:

```

```

Component Props
---------------

[](#component-props)

PropTypeDefaultDescription`type``string`—Chart type. Required. See [Chart Types](#chart-types).`data``array|null``null`Chart data. Shape depends on the chart type.`height``int``320`Height in pixels.`colors``string|array``'default'`A named palette or an array of hex colour strings.`title``string|null``null`Heading rendered above the chart.`subtitle``string|null``null`Sub-heading rendered below the title.Livewire Integration
--------------------

[](#livewire-integration)

Pass data from a Livewire property or computed property. The chart updates automatically whenever the data changes.

```

        Monthly
        Quarterly

```

Chart Types
-----------

[](#chart-types)

### Bar

[](#bar)

Vertical bars. Suitable for comparing discrete categories.

```
$data = [
    ['label' => 'Jan', 'value' => 120],
    ['label' => 'Feb', 'value' => 98],
    ['label' => 'Mar', 'value' => 145],
];
```

---

### Line

[](#line)

Single or multi-series line chart.

```
// Single series
$data = [
    ['label' => 'Mon', 'value' => 230],
    ['label' => 'Tue', 'value' => 310],
    ['label' => 'Wed', 'value' => 280],
];

// Multi-series
$data = [
    [
        'name' => 'Revenue',
        'data' => [
            ['x' => 'Mon', 'y' => 400],
            ['x' => 'Tue', 'y' => 520],
        ],
    ],
    [
        'name' => 'Costs',
        'data' => [
            ['x' => 'Mon', 'y' => 200],
            ['x' => 'Tue', 'y' => 230],
        ],
    ],
];
```

---

### Area

[](#area)

Identical data shape to `line`. Fills the region between the line and the x-axis.

---

### Pie

[](#pie)

Proportional segments. Suitable for part-to-whole comparisons with a small number of categories.

```
$data = [
    ['label' => 'Direct',   'value' => 40],
    ['label' => 'Organic',  'value' => 35],
    ['label' => 'Referral', 'value' => 25],
];
```

---

### Donut

[](#donut)

Same data shape as `pie`. Renders with a hollow centre displaying the total.

---

### Scatter

[](#scatter)

Two-dimensional point plot. Optionally groups points by category.

```
$data = [
    ['x' => 160, 'y' => 80, 'label' => 'Alice', 'group' => 'Control'],
    ['x' => 175, 'y' => 95, 'label' => 'Bob',   'group' => 'Treatment'],
    ['x' => 155, 'y' => 60, 'label' => 'Carol', 'group' => 'Control'],
];
```

When `group` is provided, points are coloured per group and a legend is rendered automatically.

---

### Bubble

[](#bubble)

Three-dimensional scatter where the third variable is encoded as circle size.

```
$data = [
    ['x' => 20, 'y' => 60, 'r' => 15, 'label' => 'Alpha'],
    ['x' => 40, 'y' => 30, 'r' => 40, 'label' => 'Beta'],
    ['x' => 70, 'y' => 75, 'r' => 25, 'label' => 'Gamma'],
];
```

`r` is the raw radius value, scaled proportionally relative to the other points.

---

### Radar

[](#radar)

Multivariate comparison across a common scale. Supports single and multi-series.

```
// Single series
$data = [
    ['axis' => 'Speed',    'value' => 80],
    ['axis' => 'Power',    'value' => 65],
    ['axis' => 'Stamina',  'value' => 90],
    ['axis' => 'Accuracy', 'value' => 72],
];

// Multi-series
$data = [
    [
        'name'   => 'Model A',
        'values' => [
            ['axis' => 'Speed', 'value' => 80],
            ['axis' => 'Power', 'value' => 65],
        ],
    ],
    [
        'name'   => 'Model B',
        'values' => [
            ['axis' => 'Speed', 'value' => 60],
            ['axis' => 'Power', 'value' => 90],
        ],
    ],
];
```

---

### Heatmap

[](#heatmap)

A grid where cell colour encodes a numeric value. Useful for time-based patterns.

```
$data = [
    ['x' => 'Mon', 'y' => '9am',  'value' => 74],
    ['x' => 'Mon', 'y' => '10am', 'value' => 55],
    ['x' => 'Tue', 'y' => '9am',  'value' => 90],
];
```

Cell colour is interpolated from light to the primary colour of the active palette.

---

### Treemap

[](#treemap)

Hierarchical data rendered as nested rectangles. Area encodes magnitude.

```
$data = [
    'name'     => 'Expenditure',
    'children' => [
        ['name' => 'Engineering', 'value' => 400],
        ['name' => 'Marketing',   'value' => 250],
        ['name' => 'Operations',  'value' => 180],
        ['name' => 'Support',     'value' =>  90],
    ],
];
```

---

### Gauge

[](#gauge)

Displays a single value within a defined range. Supports optional colour zones.

```
$data = [
    'value' => 72,
    'min'   => 0,
    'max'   => 100,
    'label' => 'Uptime',
];
```

Define zones to apply different colours across ranges of the arc:

```
$data = [
    'value' => 72,
    'min'   => 0,
    'max'   => 100,
    'label' => 'Server Load',
    'zones' => [
        ['from' => 0,  'to' => 50,  'color' => '#22c55e'],
        ['from' => 50, 'to' => 80,  'color' => '#f59e0b'],
        ['from' => 80, 'to' => 100, 'color' => '#ef4444'],
    ],
];
```

When `zones` is omitted, the arc uses the first colour of the active palette.

---

### Histogram

[](#histogram)

Distributes numeric data into automatic bins and renders the frequency of each.

```
// Flat array
$data = [23, 45, 67, 34, 89, 12, 56, 78, 43, 65];

// Keyed array
$data = [
    ['value' => 23],
    ['value' => 45],
];
```

---

### Waterfall

[](#waterfall)

Shows a running total with incremental additions and subtractions. Mark the final entry with `'type' => 'total'` to render it as a summary bar.

```
$data = [
    ['label' => 'Opening',  'value' => 1000],
    ['label' => 'Sales',    'value' =>  450],
    ['label' => 'Refunds',  'value' => -120],
    ['label' => 'Expenses', 'value' => -200],
    ['label' => 'Closing',  'value' =>    0, 'type' => 'total'],
];
```

Positive increments render in green, negative in red, and the total bar in the primary palette colour.

---

### Funnel

[](#funnel)

Ordered stages with automatic conversion rate calculation between each step.

```
$data = [
    ['label' => 'Visitors',  'value' => 10000],
    ['label' => 'Signups',   'value' =>  4200],
    ['label' => 'Activated', 'value' =>  1800],
    ['label' => 'Paying',    'value' =>   600],
];
```

Colour Palettes
---------------

[](#colour-palettes)

The `colors` prop accepts either a palette name or a custom array of hex strings.

```

```

Available palettes:

NameDescription`default`Indigo, amber, emerald, blue, red, violet, pink, teal`ocean`Blues from light to deep`vivid`High-saturation spectrum`pastel`Soft, low-contrast tones`warm`Reds, oranges, and yellows`cool`Cyans, blues, and purples`rose`Pinks and deep reds`slate`Greys and navyCustomising the Blade Component
-------------------------------

[](#customising-the-blade-component)

To publish the component view for local modification:

```
php artisan vendor:publish --tag=tayo-views
```

The file is published to `resources/views/vendor/tayo/components/chart.blade.php`. Laravel will use your published copy in preference to the package version.

License
-------

[](#license)

MIT. See [LICENSE](LICENSE).

###  Health Score

35

—

LowBetter than 77% of packages

Maintenance78

Regular maintenance activity

Popularity6

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity44

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 ~1 days

Total

2

Last Release

114d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e201fa2e5a2e298aa46c13ba8ccc0afb8cedc38498782f325a804bd26bb98883?d=identicon)[Sadam](/maintainers/Sadam)

---

Top Contributors

[![sadamegal](https://avatars.githubusercontent.com/u/100015880?v=4)](https://github.com/sadamegal "sadamegal (5 commits)")

---

Tags

laraveldatainteractivelivewiredashboardanalyticschartsalpinelivewire-chartsdata visualizationvisualizationd3responsive chartslaravel-chartsalpine-chartsd3-chartscharting-libraryinteractive-chartscustomizable-charts

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/sadam-tayo/health.svg)

```
[![Health](https://phpackages.com/badges/sadam-tayo/health.svg)](https://phpackages.com/packages/sadam-tayo)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3345.1M337](/packages/psalm-plugin-laravel)[laravel/pulse

Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application.

1.7k14.1M122](/packages/laravel-pulse)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5452.7k](/packages/hasinhayder-tyro-dashboard)[chartello/chartello

Visualize your Laravel app data in simple dashboards.

1814.0k](/packages/chartello-chartello)[eliseekn/laravel-metrics

Generate easily metrics and trends data of your models for your dashboards.

1347.0k](/packages/eliseekn-laravel-metrics)[tomshaw/electricgrid

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

119.2k](/packages/tomshaw-electricgrid)

PHPackages © 2026

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