PHPackages                             elemind/filament-echarts - 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. elemind/filament-echarts

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

elemind/filament-echarts
========================

Apache ECharts integration for Filament

1.1.0(4mo ago)163.9k—6%2[1 PRs](https://github.com/elemind/filament-echarts/pulls)MITPHPPHP ^8.2CI passing

Since Nov 28Pushed 1mo agoCompare

[ Source](https://github.com/elemind/filament-echarts)[ Packagist](https://packagist.org/packages/elemind/filament-echarts)[ Docs](https://github.com/elemind/filament-echarts)[ GitHub Sponsors](https://github.com/elemind)[ RSS](/packages/elemind-filament-echarts/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (12)Versions (5)Used By (0)

Filament Apache ECharts
=======================

[](#filament-apache-echarts)

[![Latest Version on Packagist](https://camo.githubusercontent.com/fa0486475c52f2de27c0c76a90766ab0175acf2b8acf23a176ebef0ab53bccae/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f656c656d696e642f66696c616d656e742d656368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/elemind/filament-echarts)[![GitHub Tests Action Status](https://camo.githubusercontent.com/851cd7f79ea48bfddcceca02171301e70719bbfcad07c80bc15a54e1d2a15ffe/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f656c656d696e642f66696c616d656e742d656368617274732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/elemind/filament-echarts/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/fb9efb05b6544b618d17288772c35a1f9e9dc9947db469d5654f79d54e06b875/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f656c656d696e642f66696c616d656e742d656368617274732f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/elemind/filament-echarts/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/3b84f09968b2e5890428590cfe9b55ea31b747768d31e8ca124db9dc3b088fbb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f656c656d696e642f66696c616d656e742d656368617274732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/elemind/filament-echarts)

Strongly inspired by [Leandro Ferreira’s Apex Charts plugin](https://filamentphp.com/plugins/leandrocfe-apex-charts), this plugin delivers Apache ECharts integration for Filament.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require elemind/filament-echarts
```

Register the plugin for the Filament Panels you want to use:

```
use Elemind\FilamentECharts\FilamentEChartsPlugin;
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentEChartsPlugin::make()
        ]);
}
```

Usage
-----

[](#usage)

Start by creating a widget with the command:

```
php artisan make:filament-echarts BlogPostsChart
```

### Available chart samples

[](#available-chart-samples)

You may choose:

- Line
- Bar
- Pie
- Scatter
- Candlestick
- Radar
- Boxplot
- Sunburst
- Parallel
- Sankey
- Funnel
- Gauge

Setting a widget title
----------------------

[](#setting-a-widget-title)

You may set a widget title:

```
protected static ?string $heading = 'Blog Posts Chart';
```

Optionally, you can use the `getHeading()` method.

Setting a widget subheading
---------------------------

[](#setting-a-widget-subheading)

You may set a widget subheading:

```
protected static ?string $subheading = 'This is a subheading';
```

Optionally, you can use the `getSubheading()` method.

Setting a chart id
------------------

[](#setting-a-chart-id)

You may set a chart id:

```
protected static string $chartId = 'blogPostsChart';
```

Making a widget collapsible
---------------------------

[](#making-a-widget-collapsible)

You may set a widget to be collapsible:

```
protected static bool $isCollapsible = true;
```

You can also use the `isCollapsible()` method:

```
protected function isCollapsible(): bool
{
    return true;
}
```

Setting a widget height
-----------------------

[](#setting-a-widget-height)

By default, the widget height is set to `300px`. You may set a custom height:

```
protected static ?int $contentHeight = 400; //px
```

Optionally, you can use the `getContentHeight()` method.

```
protected function getContentHeight(): ?int
{
    return 400;
}
```

Setting a widget footer
-----------------------

[](#setting-a-widget-footer)

You may set a widget footer:

```
protected static ?string $footer = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
```

You can also use the `getFooter()` method:

Custom view:

```
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Contracts\View\View;

protected function getFooter(): null|string|Htmlable|View
{
    return view('custom-footer', ['text' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.']);
}
```

```

    {{ $text }}

```

Html string:

```
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Contracts\View\View;
protected function getFooter(): null|string|Htmlable|View
{
    return new HtmlString('Lorem Ipsum is simply dummy text of the printing and typesetting industry.');
}
```

Hiding header content
---------------------

[](#hiding-header-content)

You can hide header content by **NOT** providing these

- $heading
- getHeading()
- $subheading
- getSubheading()
- getOptions()

Filtering chart data
--------------------

[](#filtering-chart-data)

You can set up chart filters to change the data shown on chart. Commonly, this is used to change the time period that chart data is rendered for.

### Filter schema

[](#filter-schema)

You may use components from the [Schemas](https://filamentphp.com/docs/4.x/schemas/overview#available-components) to create custom filters. You need to use `HasFiltersSchema` trait and implement the `filtersSchema()` method to define the filter form schema:

```
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;
use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema;
use Elemind\FilamentECharts\Widgets\EChartWidget;

class BlogPostsChart extends EChartWidget
{
    use HasFiltersSchema;

    public function filtersSchema(Schema $schema): Schema
    {
        return $schema->components([
            TextInput::make('title')
                ->default('Blog Posts Chart'),

            DatePicker::make('date_start')
                ->default('2025-07-01'),

            DatePicker::make('date_end')
                ->default('2025-07-31'),
        ]);
    }

    /**
    * Use this method to update the chart options when the filter form is submitted.
    */
    public function updatedInteractsWithSchemas(string $statePath): void
    {
        $this->updateOptions();
    }
}
```

The data from the custom filter is available in the `$this->filters` array. You can use the active filter values within your `getOptions()` method:

```
protected function getOptions(): array
{
    $title = $this->filters['title'];
    $dateStart = $this->filters['date_start'];
    $dateEnd = $this->filters['date_end'];

    return [
        //chart options
    ];
}
```

### Single select

[](#single-select)

To set a default filter value, set the `$filter` property:

```
public ?string $filter = 'today';
```

Then, define the `getFilters()` method to return an array of values and labels for your filter:

```
protected function getFilters(): ?array
{
    return [
        'today' => 'Today',
        'week' => 'Last week',
        'month' => 'Last month',
        'year' => 'This year',
    ];
}
```

You can use the active filter value within your `getOptions()` method:

```
protected function getOptions(): array
{
    $activeFilter = $this->filter;

    return [
        //chart options
    ];
}
```

Live updating (polling)
-----------------------

[](#live-updating-polling)

By default, chart 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;
```

Defer loading
-------------

[](#defer-loading)

This can be helpful when you have slow queries and you don't want to hold up the entire page load:

```
protected static bool $deferLoading = true;

protected function getOptions(): array
{
    //showing a loading indicator immediately after the page load
    if (!$this->readyToLoad) {
        return [];
    }

    //slow query
    sleep(2);

    return [
        //chart options
    ];
}
```

Loading indicator
-----------------

[](#loading-indicator)

You can change the loading indicator:

```
protected static ?string $loadingIndicator = 'Loading...';
```

You can also use the `getLoadingIndicator()` method:

```
use Illuminate\Contracts\View\View;
protected function getLoadingIndicator(): null|string|View
{
    return view('custom-loading-indicator');
}
```

```

    Loading...

```

Dark mode
---------

[](#dark-mode)

The dark mode is supported and enabled by default.

Extra options and Formatters
----------------------------

[](#extra-options-and-formatters)

You can use the `extraJsOptions` method to add additional options to the chart:

```
use Filament\Support\RawJs;

protected function extraJsOptions(): ?RawJs
{
    return RawJs::make(