moonshine/apexcharts

Apexcharts for MoonShine

1.2.0 2025-08-26 15:15 UTC

Requires

• php: ^8.2|^8.3
• ext-curl: *
• ext-json: *

Requires (Dev)

• moonshine/moonshine: ^3.0
• orchestra/testbench: ^9.0
• phpunit/phpunit: ^11.0.1
• rector/rector: ^1.0

Conflicts

• moonshine/moonshine: <3.0.0

MIT

• Danil Shutsky

• charts
• apexcharts
• moonshine

README

Note

The package is based on the ApexCharts library.

Compatibility

MoonShine	Moonshine ApexCharts	Currently supported
>= v3.0	>= v1.0.0	yes

Installation

composer require moonshine/apexcharts
php artisan vendor:publish --tag=moonshine-apexcharts-assets

Metric Donut Chart

The DonutChartMetric metric is designed for creating Donut charts.

Make

You can create DonutChartMetric using the static make() method.

make(Closure|string $label)

Method values() allows you to specify the relevance for a metric.

values(array|Closure $values)

use MoonShine\Apexcharts\Components\DonutChartMetric;

DonutChartMetric::make('Subscribers') 
    ->values(['CutCode' => 10000, 'Apple' => 9999]) 

Colors

The colors() method allows you to specify colors for the metric.

colors(array|Closure $values)

DonutChartMetric::make('Subscribers')
    ->values(['CutCode' => 10000, 'Apple' => 9999])
    ->colors(['#ffcc00', '#00bb00'])

Decimal places

The decimals() method allows you to specify the maximum number of decimal places for the total value.

Note

By default, up to three decimal places are displayed.

DonutChartMetric::make('Subscribers')
    ->values(['CutCode' => 10000.12, 'Apple' => 9999.32])
    ->decimals(0) 

Block width

Method columnSpan() allows you to set the block width in the Grid grid.

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)

• $columnSpan - relevant for desktop,
• $adaptiveColumnSpan - relevant for mobile version.

use MoonShine\Apexcharts\Components\DonutChartMetric;
use MoonShine\UI\Components\Layout\Grid;

Grid::make([ 
    DonutChartMetric::make('Subscribers')
        ->values(['CutCode' => 10000, 'Apple' => 9999])
        ->columnSpan(6), 
    DonutChartMetric::make('Tasks')
        ->values(['New' => 234, 'Done' => 421])
        ->columnSpan(6) 
]) 

Block height

Method height() allows you to set the block height in pixels.

height(
    int|string $height
)

Default height is 350

DonutChartMetric::make('Subscribers')
    ->values(['CutCode' => 10000.12, 'Apple' => 9999.32])
    ->height(600) 

Metric Line Chart

The LineChartMetric metric is designed to display line charts.

Make

You can create a *LineChartMetric using the static make() method.

make(Closure|string $label)

The line() method allows you to add a value line to the metric. You can add multiple lines to ValueMetric.

line(
    array|Closure $line,
    string|array|Closure $color = '#7843E9',
    string|array|Closure $type = 'line',    
)

• $line - values for charting,
• $color - line color,
• $type - chart type (line, area, column)

use MoonShine\Apexcharts\Components\LineChartMetric;

LineChartMetric::make('Orders') 
    ->line([
        'Profit' => Order::query()
            ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('sum','date')
            ->toArray()
    ], type: fn() => 'area')
    ->line([
        'Avg' => Order::query()
            ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('avg','date')
            ->toArray()
    ], '#EC4176', 'line'); 

You can define multiple lines through one line() method.

LineChartMetric::make('Orders') 
    ->line([
        'Profit' => Order::query()
            ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('sum','date')
            ->toArray(),
        'Avg' => Order::query()
            ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('avg','date')
            ->toArray()
    ],[
        'red', 'blue'
    ], [
        'area', 'line'
    ]);

Sorting keys

By default, the LineChart chart has its keys sorted in ascending order. This feature can be disabled using the withoutSortKeys() method.

LineChartMetric::make('Orders')
    ->line([
        'Profit' => Order::query()
            ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('sum','date')
            ->toArray()
    ])
    ->withoutSortKeys(), 

Block width

Method columnSpan() allows you to set the block width in the Grid grid.

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
), 

• $columnSpan - relevant for desktop,
• $adaptiveColumnSpan - relevant for mobile version.

use MoonShine\Apexcharts\Components\LineChartMetric;
use MoonShine\UI\Components\Layout\Grid;

Grid::make([ 
    LineChartMetric::make('Articles')
        ->line([
            'Count' => [
                now()->subDays()->format('Y-m-d') =>
                    Article::whereDate(
                        'created_at',
                        now()->subDays()->format('Y-m-d')
                    )->count(),
                now()->format('Y-m-d') =>
                    Article::whereDate(
                        'created_at',
                        now()->subDays()->format('Y-m-d')
                    )->count()
            ]
        ])
        ->columnSpan(6), 
    LineChartMetric::make('Comments')
        ->line([
            'Count' => [
                now()->subDays()->format('Y-m-d') =>
                    Comment::whereDate(
                        'created_at',
                        now()->subDays()->format('Y-m-d')
                    )->count(),
                now()->format('Y-m-d') =>
                    Comment::whereDate(
                        'created_at',
                        now()->subDays()->format('Y-m-d')
                    )->count()
            ]
        ])
        ->columnSpan(6) 
])

Block height

Method height() allows you to set the block height in pixels.

height(
    int|string $height
)

Default height is 300

use MoonShine\Apexcharts\Components\LineChartMetric;

LineChartMetric::make('Orders') 
    ->line([
        'Avg' => Order::query()
            ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('avg','date')
            ->toArray()
    ])
    ->height(600); 

ApexChart Events

This method setEvents() allows you to use: ApexCharts Events.

It works with both DonutChartMetric and LineChartMetric. For specific details and nuances, refer to the documentation: ApexCharts Events Documentation.

use MoonShine\Apexcharts\Components\LineChartMetric;

LineChartMetric::make('Orders')
    ->line([
        'Orders' => Order::query()
            ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
            ->groupBy('date')
            ->pluck('sum','date')
            ->toArray()
    ], type: 'bar')
    ->withoutSortKeys()
    ->setEvents(<<<JS
    {
        dataPointSelection: function(event, chartContext, config) {
            var pointIndex = config.dataPointIndex;
            location.href = '/admin/page/dashboard/?point=' + (pointIndex + 1);
        }
    }
    JS),