Version

Theme

Widgets

Stats overview widgets

Overview

Filament comes with a "stats overview" widget template, which you can use to display a number of different stats in a single widget, without needing to write a custom view.

Start by creating a widget with the command:

php artisan make:filament-widget StatsOverview --stats-overview

This command will create a new StatsOverview.php file. Open it, and return Stat instances from the getStats() method:

<?php
 
namespace App\Filament\Widgets;
 
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;
 
class StatsOverview extends BaseWidget
{
protected function getStats(): array
{
return [
Stat::make('Unique views', '192.1k'),
Stat::make('Bounce rate', '21%'),
Stat::make('Average time on page', '3:12'),
];
}
}

Now, check out your widget in the dashboard.

Adding a description and icon to a stat

You may add a description() to provide additional information, along with a descriptionIcon():

use Filament\Widgets\StatsOverviewWidget\Stat;
 
protected function getStats(): array
{
return [
Stat::make('Unique views', '192.1k')
->description('32k increase')
->descriptionIcon('heroicon-m-arrow-trending-up'),
Stat::make('Bounce rate', '21%')
->description('7% decrease')
->descriptionIcon('heroicon-m-arrow-trending-down'),
Stat::make('Average time on page', '3:12')
->description('3% increase')
->descriptionIcon('heroicon-m-arrow-trending-up'),
];
}

The descriptionIcon() method also accepts a second parameter to put the icon before the description instead of after it:

use Filament\Support\Enums\IconPosition;
use Filament\Widgets\StatsOverviewWidget\Stat;
 
Stat::make('Unique views', '192.1k')
->description('32k increase')
->descriptionIcon('heroicon-m-arrow-trending-up', IconPosition::Before)

Changing the color of the stat

You may also give stats a color() (danger, gray, info, primary, success or warning):

use Filament\Widgets\StatsOverviewWidget\Stat;
 
protected function getStats(): array
{
return [
Stat::make('Unique views', '192.1k')
->description('32k increase')
->descriptionIcon('heroicon-m-arrow-trending-up')
->color('success'),
Stat::make('Bounce rate', '21%')
->description('7% increase')
->descriptionIcon('heroicon-m-arrow-trending-down')
->color('danger'),
Stat::make('Average time on page', '3:12')
->description('3% increase')
->descriptionIcon('heroicon-m-arrow-trending-up')
->color('success'),
];
}

Adding extra HTML attributes to a stat

You may also pass extra HTML attributes to stats using extraAttributes():

use Filament\Widgets\StatsOverviewWidget\Stat;
 
protected function getStats(): array
{
return [
Stat::make('Processed', '192.1k')
->color('success')
->extraAttributes([
'class' => 'cursor-pointer',
'wire:click' => "\$dispatch('setStatusFilter', { filter: 'processed' })",
]),
// ...
];
}

In this example, we are deliberately escaping the $ in $dispatch() since this needs to be passed directly to the HTML, it is not a PHP variable.

Adding a chart to a stat

You may also add or chain a chart() to each stat to provide historical data. The chart() method accepts an array of data points to plot:

use Filament\Widgets\StatsOverviewWidget\Stat;
 
protected function getStats(): array
{
return [
Stat::make('Unique views', '192.1k')
->description('32k increase')
->descriptionIcon('heroicon-m-arrow-trending-up')
->chart([7, 2, 10, 3, 15, 4, 17])
->color('success'),
// ...
];
}

Live updating stats (polling)

By default, stats overview widgets refresh their data every 5 seconds.

To customize this, you may override the $pollingInterval property on the class to a new interval:

protected static ?string $pollingInterval = '10s';

Alternatively, you may disable polling altogether:

protected static ?string $pollingInterval = null;

Disabling lazy loading

By default, widgets are lazy-loaded. This means that they will only be loaded when they are visible on the page.

To disable this behavior, you may override the $isLazy property on the widget class:

protected static bool $isLazy = false;
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion