PHPackages                             moonshine/apexcharts - 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. moonshine/apexcharts

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

moonshine/apexcharts
====================

Apexcharts for MoonShine

3.1.1(3mo ago)316.7k↑16.4%5MITPHPPHP ^8.2|^8.3

Since Oct 14Pushed 3mo ago2 watchersCompare

[ Source](https://github.com/moonshine-software/apexcharts)[ Packagist](https://packagist.org/packages/moonshine/apexcharts)[ Docs](https://moonshine-laravel.com)[ RSS](/packages/moonshine-apexcharts/feed)WikiDiscussions 3.x Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (14)Used By (0)

ApexCharts for [MoonShine](https://moonshine-laravel.com) Laravel admin panel
=============================================================================

[](#apexcharts-for-moonshine-laravel-admin-panel)

[![Latest Version on Packagist](https://camo.githubusercontent.com/506bafb945966f0f3c771df200481e6ba7a6f213e5e18a285ee63164f3df91de/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6f6f6e7368696e652f617065786368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/moonshine/apexcharts)[![Total Downloads](https://camo.githubusercontent.com/7b0db58997e92852f4bff9e91cef675a937c067f5dd1dd4278104b3495c30955/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d6f6f6e7368696e652f617065786368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/moonshine/apexcharts)

   ![ApexCharts for MoonShine](./art/apexcharts.png)Note

This package adds [ApexCharts.js](https://apexcharts.com/) components to the [MoonShine](https://moonshine-laravel.com/) Laravel admin panel.

Compatibility
-------------

[](#compatibility)

MoonShineMoonshine ApexChartsCurrently supported>= v3.0>= v1.0.0no>= v3.0>= v3.0.0yesInstallation
------------

[](#installation)

Install the package via Composer:

```
composer require moonshine/apexcharts
```

Publish the assets:

```
php artisan vendor:publish --tag=moonshine-apexcharts-assets --force
```

Optional: Publish the configuration file to customize default settings:

```
php artisan vendor:publish --tag=moonshine-apexcharts-config
```

Available Chart Types
---------------------

[](#available-chart-types)

- **Line Chart** - Linear, area, and column charts for time-series data with full typing support
- **Donut Chart** - Circular charts for categorical data
- **Sparkline Chart** - Minimalist charts for KPI cards with value and change indicators
- **Raw Chart** - Direct access to ApexCharts configuration for maximum flexibility

Quick Start
-----------

[](#quick-start)

### Line Chart

[](#line-chart)

```
use MoonShine\Apexcharts\Components\LineChartMetric;
use MoonShine\Apexcharts\Support\SeriesItem;

LineChartMetric::make('Заказы')
    ->series([
        SeriesItem::make('Выручка 1', [
            now()->format('Y-m-d') => 100,
            now()->addDay()->format('Y-m-d') => 200,
            now()->addDays(2)->format('Y-m-d') => 500,
            now()->addDays(3)->format('Y-m-d') => 700,
        ])->color('#EC4176'),
        SeriesItem::make('Выручка 2', [
            now()->format('Y-m-d') => 300,
            now()->addDay()->format('Y-m-d') => 400,
            now()->addDays(2)->format('Y-m-d') => 300,
            now()->addDays(3)->format('Y-m-d') => 800,
        ])->color('#85737E'),
        SeriesItem::make('Выручка 3', [
            now()->format('Y-m-d') => 400,
            now()->addDay()->format('Y-m-d') => 500,
            now()->addDays(2)->format('Y-m-d') => 400,
            now()->addDays(3)->format('Y-m-d') => 600,
        ])->color('#1e96fc'),
    ]),

LineChartMetric::make('Заказы')
    ->series([
        SeriesItem::make('Выручка 1', [
            now()->format('Y-m-d') => 100,
            now()->addDay()->format('Y-m-d') => 200,
            now()->addDays(2)->format('Y-m-d') => 500,
            now()->addDays(3)->format('Y-m-d') => 700,
        ])->line(),
        SeriesItem::make('Выручка 2', [
            now()->format('Y-m-d') => 300,
            now()->addDay()->format('Y-m-d') => 400,
            now()->addDays(2)->format('Y-m-d') => 300,
            now()->addDays(3)->format('Y-m-d') => 800,
        ])->area(),
        SeriesItem::make('Выручка 3', [
            now()->format('Y-m-d') => 400,
            now()->addDay()->format('Y-m-d') => 500,
            now()->addDays(2)->format('Y-m-d') => 400,
            now()->addDays(3)->format('Y-m-d') => 600,
        ])->column(),
    ])
```

   ![Line chart metric example](./art/line_chart_metric.png)### Donut Chart

[](#donut-chart)

```
use MoonShine\Apexcharts\Components\DonutChartMetric;

DonutChartMetric::make('Traffic Sources')
    ->values([
        'Direct' => 3250,
        'Organic' => 2100,
        'Social' => 1850,
        'Referral' => 1200,
    ]);
```

   ![windows](./art/donut_chart_metric.png)### Sparkline Chart

[](#sparkline-chart)

Minimalist area charts perfect for KPI cards and dashboard widgets:

```
use MoonShine\Apexcharts\Components\SparklineChartMetric;

// Basic sparkline with value and change indicator
SparklineChartMetric::make('Revenue')
    ->values([30, 40, 35, 50, 49, 60, 70, 91, 125])
    ->value('192.10k', prefix: '$')
    ->change(32, suffix: 'k')
    ->colors(['#10b981'])
```

**With decrease indicator (negative change):**

```
SparklineChartMetric::make('Expenses')
    ->values([100, 95, 90, 85, 80, 75])
    ->value('45.5k', prefix: '$')
    ->change(-12, suffix: 'k')
    ->colors(['#ef4444'])
```

**Custom change text (localization):**

```
SparklineChartMetric::make('Users')
    ->values([10, 20, 30, 40, 50])
    ->value('1,234')
    ->change(156)
    ->changeText('growth', 'decline')
```

**Straight line instead of smooth curve:**

```
SparklineChartMetric::make('Orders')
    ->values([5, 8, 12, 15, 20])
    ->value(847)
    ->change(23, suffix: '%')
    ->straight()
```

**Without gradient fill:**

```
SparklineChartMetric::make('Visits')
    ->values([50, 60, 55, 70, 65])
    ->value('12.5k')
    ->withoutGradient()
    ->colors(['#3b82f6'])
```

**Minimal sparkline (no value display):**

```
SparklineChartMetric::make('Trend')
    ->values([1, 3, 2, 4, 3, 5, 4, 6])
    ->colors(['#8b5cf6'])
    ->height(40)
```

**With icon and custom icon color:**

```
use MoonShine\Support\Enums\Color;

SparklineChartMetric::make('Revenue')
    ->icon('heroicons.currency-dollar')
    ->iconColor(Color::SUCCESS)
    ->values([30, 40, 35, 50, 49, 60, 70])
    ->value('192.10k', prefix: '$')
    ->change(32, suffix: 'k')
    ->colors(['#10b981'])
```

Available icon colors: `Color::PRIMARY`, `Color::SECONDARY`, `Color::SUCCESS`, `Color::WARNING`, `Color::ERROR`, `Color::INFO`

### Raw Chart

[](#raw-chart)

For custom chart types or advanced configurations:

```
use MoonShine\Apexcharts\Components\RawChartMetric;

RawChartMetric::make('Interactive Radar Chart')
    ->config([
        'chart' => [
            'type' => 'radar',
            'height' => 350,
        ],
        'series' => [
            [
                'name' => 'Current Year',
                'data' => [20, 90, 45, 75, 60],
            ],
        ],
        'xaxis' => [
            'categories' => ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'],
        ],
    ])
    ->jsChartEvents(theme(6)  // Use predefined color palette
```

**Monochrome with custom color:**

```
->theme(
    monochromeEnabled: true,
    monochromeColor: '#FF6384',
    monochromeShadeIntensity: 0.5
)
```

API Reference
-------------

[](#api-reference)

### Common Methods

[](#common-methods)

Available for all chart types:

- `->withoutWrapper()` - Remove box wrapper for custom layouts
- `->columnSpan(int $span)` - Number of grid columns (1-12)
- `->colors(array $colors)` - Override palette with custom colors
- `->theme(...)` - Configure theme with palette and options
- `->height(int $height)` - Chart height in pixels
- `->icon(string $icon)` - Set icon (e.g., `'heroicons.chart-bar'`)
- `->iconColor(Color $color)` - Set icon color using `MoonShine\Support\Enums\Color`
- `->jsChartEvents(string $js)` - JavaScript event handlers

### LineChartMetric

[](#linechartmetric)

- `->series(array|SeriesItem $series)` - Add series
- `->withoutSortKeys()` - Preserve original key order

```
SeriesItem::make(string $name, array $data)
    ->line()                // Line chart type
    ->area()                // Area chart type
    ->column()              // Column chart type
    ->color('#FF5722')      // Custom color
    ->name('New Name')      // Change display name
    ->data([...])           // Update data
```

### DonutChartMetric

[](#donutchartmetric)

- `->values(array $values)` - Chart data (key => value)
- `->decimals(int $decimals)` - Decimal places (0-100)

### SparklineChartMetric

[](#sparklinechartmetric)

**Data methods:**

- `->values(array $values)` - Array of numeric values for the chart

**Value display:**

- `->value(string|int|float $value, ?string $prefix, ?string $suffix)` - Main value to display
- `->change(string|int|float $value, ?string $prefix, ?string $suffix)` - Change indicator (positive = green, negative = red)
- `->changeText(string $increase, string $decrease)` - Custom text for increase/decrease labels
- `->withoutChangeText()` - Hide increase/decrease text, show only value and icon

**Chart appearance:**

- `->curve(string $curve)` - Curve type: `'smooth'`, `'straight'`, `'stepline'`, `'monotoneCubic'`
- `->straight()` - Shortcut for `->curve('straight')`
- `->gradient(bool $enabled, float $opacityFrom, float $opacityTo)` - Configure gradient fill
- `->withoutGradient()` - Disable gradient fill (line only)
- `->strokeWidth(int $width)` - Line thickness (default: 2)
- `->withoutTooltip()` - Disable hover tooltip

### RawChartMetric

[](#rawchartmetric)

- `->config(array $config)` - Full ApexCharts configuration

Events
------

[](#events)

Add interactivity with JavaScript events:

```
RawChartMetric::make('Interactive Chart')
    ->jsChartEvents(