Stats

Dashboard

Getting started

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

Then return Card instances from the getCards() method:

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

Now, check out your widget in the dashboard.

Card descriptions and icons

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

protected function getCards(): array
{
return [
Card::make('Unique views', '192.1k')
->description('32k increase')
->descriptionIcon('heroicon-s-trending-up'),
Card::make('Bounce rate', '21%')
->description('7% increase')
->descriptionIcon('heroicon-s-trending-down'),
Card::make('Average time on page', '3:12')
->description('3% increase')
->descriptionIcon('heroicon-s-trending-up'),
];
}

Card colors

You may also give cards a color() (primary, success, warning or danger):

protected function getCards(): array
{
return [
Card::make('Unique views', '192.1k')
->description('32k increase')
->descriptionIcon('heroicon-s-trending-up')
->color('success'),
Card::make('Bounce rate', '21%')
->description('7% increase')
->descriptionIcon('heroicon-s-trending-down')
->color('danger'),
Card::make('Average time on page', '3:12')
->description('3% increase')
->descriptionIcon('heroicon-s-trending-up')
->color('success'),
];
}

Card extra HTML attributes

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

protected function getCards(): array
{
return [
Card::make('Processed', '192.1k')
->color('success')
->extraAttributes([
'class' => 'cursor-pointer',
'wire:click' => '$emitUp("setStatusFilter", "processed")',
]),
// ...
];
}

Card charts

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

protected function getCards(): array
{
return [
Card::make('Unique views', '192.1k')
->description('32k increase')
->descriptionIcon('heroicon-s-trending-up')
->chart([7, 2, 10, 3, 15, 4, 17])
->color('success'),
// ...
];
}

Live updating (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;
Edit on GitHub

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

Enjoying Filament?

We are open source at heart. To allow us to build new features, fix bugs, and run the community, we require your financial support.

Sponsor Filament on GitHub