Download the PHP package koassi/filament-highcharts without Composer

Highcharts integration for Filament

Strongly inspired by Leandro Ferreira's Apex Charts plugin, this plugin delivers Highcharts integration for Filament panels.

Requirements

• PHP 8.3+
• Filament 5.x

Note: Highcharts is free for personal/non-commercial use. For commercial use, please review the Highcharts license.

Installation

You can install the package via composer:

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

Usage

Start by creating a widget with the command:

The command will interactively ask for the chart type, and where to create the widget (panel, resource, or alongside your Livewire components).

Your widget extends Koassi\FilamentHighcharts\Widgets\HighchartsWidget and defines its chart through the getOptions() method, which returns a standard Highcharts configuration array:

Don't forget to register the widget in your panel/resource/page, as with any Filament widget.

Ready-to-use widgets demonstrating filters, polling, deferred loading and raw JS options — the ones behind the screenshots above — are available in the examples/ directory.

Available chart samples

The generator ships with ready-to-use stubs for the following chart types. For more samples, please refer to the Highcharts documentation.

The list of available chart types is defined in the chart_options key of the package config file.

Setting a widget title

You may set a widget title (heading):

Optionally, you can use the getHeading() method.

Setting a widget subheading

You may set a widget subheading:

Optionally, you can use the getSubheading() method.

Setting a chart id

You may set a chart id:

If none is provided, a random id is generated.

Making a widget collapsible

You may set a widget to be collapsible:

You can also use the isCollapsible() method:

Setting a widget height

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

Optionally, you can use the getContentHeight() method:

Setting a widget footer

You may set a widget footer:

You can also use the getFooter() method:

Custom view:

Html string:

Hiding header content

You can hide header content by NOT providing these:

• $heading / getHeading()
• $subheading / getSubheading()

Filtering chart data

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

Filter schema

You may use components from the Schemas package to create custom filter forms. Use the HasFiltersSchema trait and implement the filtersSchema() method to define the filter form schema:

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

Single select

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

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

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

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:

Alternatively, you may disable polling altogether:

Defer loading

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

Loading indicator

You can change the loading indicator:

You can also use the getLoadingIndicator() method:

Dark mode

Dark mode is supported and enabled by default. It follows the Filament theme (light / dark / system) and reacts to theme changes in real time. For the best result, enable styled mode in your chart options:

Extra options and Formatters

Chart options returned by getOptions() are converted to JSON, so they cannot contain JavaScript functions. Use the extraJsOptions() method to add raw JavaScript options (formatters, callbacks...) that are merged into the chart options on the client side:

Publishing config

Optionally, you can publish the config file (to customize the chart types offered by the generator command, or the Highcharts version loaded from the CDN) using:

Highcharts version

The Highcharts library is loaded from the code.highcharts.com CDN, pinned to the version set in the config file so that a new Highcharts major release cannot silently break your charts:

Publishing views

Optionally, you can publish the views using:

Publishing translations

Optionally, you can publish the translations using:

Publishing stubs

Optionally, you can publish the widget stubs used by the make:filament-highcharts command using:

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• koassi
• All Contributors

License

The MIT License (MIT). Please see License File for more information.