repository·5.x·Indexed 19 days ago
https://github.com/leandrocfe/filament-apex-chartsA plugin for the Filament PHP framework that integrates the Apex Charts JavaScript library. It allows developers to create interactive, customizable charts within Filament dashboards and panels using a dedicated ApexChartWidget class and an Artisan command for scaffolding. Supported chart types include Area, Bar, Boxplot, Bubble, Candlestick, Column, Heatmap, Line, Pie, Radar, and more.
Use the Artisan command to generate a new chart widget class. You can choose from various chart types (Area, Bar, Boxplot, Bubble, Candlestick, Column, Donut, Heatmap, Line, Mixed-LineAndColumn, Pie, PolarArea, Radar, Radialbar, RangeArea, Scatter, TimelineRangeBars, Treemap, Funnel) or select Empty to define your own configuration from scratch.
php artisan make:filament-apex-charts BlogPostsChartTo use the provided example charts in your application, copy the desired widget file from the examples/ directory and paste it into your project's app\Filament\Widgets folder. After adding the file, the widget will automatically appear on your Filament dashboard page.
# Example: Copying a widget
# From: examples/Bar/BasicBarChart.php
# To: app/Filament/Widgets/BasicBarChart.phpTo create complex filters (like date ranges), use the HasFiltersSchema trait and implement filtersSchema(Schema $schema). When the schema is updated, call $this->updateOptions() in the updatedInteractsWithSchemas() method to refresh the chart.
Filter values are accessible via the $this->filters array inside getOptions().
use Filament\Forms\Components\DatePicker;
use Filament\Schemas\Schema;
use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
class BlogPostsChart extends ApexChartWidget
{
use HasFiltersSchema;
public function filtersSchema(Schema $schema): Schema
{
return $schema->components([
DatePicker::make('date_start'),
DatePicker::make('date_end'),
]);
}
public function updatedInteractsWithSchemas(string $statePath): void
{
$this->updateOptions();
}
protected function getOptions(): array
{
$dateStart = $this->filters['date_start'];
// ... use $dateStart in your chart options
return [];
}
}For simple dropdown filters, define a $filter property for the default value and implement getFilters() to return an associative array of ['value' => 'Label'].
public ?string $filter = 'today';
protected function getFilters(): ?array
{
return [
'today' => 'Today',
'week' => 'Last week',
'month' => 'Last month',
];
}
protected function getOptions(): array
{
$activeFilter = $this->filter;
// ... use $activeFilter in your chart options
return [];
}Install the package via Composer and register the plugin in your Filament Panel provider.
composer require leandrocfe/filament-apex-charts:"^5.0"use Leandrocfe ilament-apex-charts\FilamentApexChartsPlugin;
public function panel(Panel $panel): Panel
{
return $panel
->plugins([
FilamentApexChartsPlugin::make()
]);
}Optimize performance and data freshness:
protected static ?string $pollingInterval = '10s'; to refresh data automatically, or set to null to disable.protected static bool $deferLoading = true; to prevent slow queries from blocking the initial page load. In getOptions(), check $this->readyToLoad before returning data to show a loading state.protected static ?string $pollingInterval = '10s';
protected static bool $deferLoading = true;
protected function getOptions(): array
{
if (!$this->readyToLoad) {
return [];
}
return [...];
}To use Filament Apex Charts within your Filament application, you must register the FilamentApexChartsPlugin in your Panel provider. Use the make() method to instantiate the plugin and pass it to the plugins() method of your Panel configuration.
use Leandrocfe\FilamentApexCharts\FilamentApexChartsPlugin;
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
->plugins([
FilamentApexChartsPlugin::make(),
]);
}Control the widget's layout behavior:
protected static bool $isCollapsible = true; or the isCollapsible() method.protected static ?int $contentHeight = 300; or the getContentHeight() method.protected static bool $isCollapsible = true;
protected static ?int $contentHeight = 300;You can customize the appearance and identity of the widget using several properties or methods:
protected static ?string $heading or getHeading().protected static ?string $subheading or getSubheading().protected static string $chartId.protected static ?string $footer or getFooter(). The footer can return a string, an Htmlable object, or a Blade View.// Example of a custom footer using a view
protected function getFooter(): null|string|Htmlable|View
{
return view('custom-footer', ['text' => 'My custom footer text']);
}The getOptions() method is the core of the widget. It must return an array that follows the Apex Charts documentation structure. This allows you to define series, labels, axes, colors, and animations.
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Leandrocfe\FilamentApexCharts\Enums\ApexChartTypeEnum;
class BlogPostsChart extends ApexChartWidget
{
protected function getOptions(): array
{
return [
'chart' => [
'type' => ApexChartTypeEnum::Bar,
'height' => 300,
],
'series' => [
[
'name' => 'BlogPostsChart',
'data' => [7, 4, 6, 10, 14, 7, 5, 9, 10, 15, 13, 18],
],
],
'xaxis' => [
'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
],
'colors' => ['#f59e0b'],
];
}
}To use advanced Apex Charts features like formatters (e.g., adding currency symbols or custom date formats), use the extraJsOptions() method. This method returns a RawJs object containing a JavaScript object literal.
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Filament\Support\RawJs;
protected function extraJsOptions(): ?RawJs
{
return RawJs::make(<<<'JS'
{
yaxis: {
labels: {
formatter: function (val) {
return '$' + val
}
}
}
}
JS);
}The repository provides a wide variety of pre-configured Apex Chart widgets categorized by chart type. You can use these as templates for your own data visualizations: