Inline Chart Laravel Package

Getting Started

Install and pin by Filament version. One Composer line, no migrations, no config publish required for the basic path:

# Filament 5
composer require lara-zeus/inline-chart:^3.0

# Filament 3/4 — do NOT install 3.x
composer require lara-zeus/inline-chart:^2.0.4

3.0.0 exists solely to "support filament 5" — treat the major bump as potentially breaking until you've read the 2.0.4...3.0.0 diff. Pin the exact version across a Filament major boundary.

Where to look first. The README plus src/ is the entire API surface; there is no meaningful docs site. In order:

1. src/ — the column class. Every chainable method is a public method on it. Faster than hunting for docs.
2. resources/views/ — the Blade template. Tells you the markup/CSS you're emitting, which is how you debug "renders but looks wrong."
3. composer.json — the true Filament/PHP floor, and whether Chart.js is bundled or CDN-loaded.

Confirm the actual namespace and class name from src/ before copying any snippet — including the ones below. It is the only import you need.

First use case: trend beside a number you already show. Pick an existing resource table with a KPI column, add a sparkline next to it, back it with a precomputed series:

use Filament\Tables\Table;
use LaraZeus\InlineChart\InlineChartColumn; // verify from src/

public static function table(Table $table): Table
{
    return $table->columns([
        TextColumn::make('name'),

        TextColumn::make('orders_count')
            ->label('Orders (30d)')
            ->numeric(),

        InlineChartColumn::make('orders_trend')
            ->label('Trend')
            ->data(fn ($record) => $record->orders_trend) // array of numbers
            ->chartType('line')
            ->height(28)
            ->color('success'),
    ]);
}

Visually QA this in light mode, dark mode, empty series, and single-point series before wiring anything else in.

Implementation Patterns

Make the column a projection, never a computation. This is the single most important rule. Rendering is client-side; the only server cost is your data source — and it multiplies by rows per page.

// Good: precomputed JSON column cast to array
->data(fn ($record) => $record->orders_trend)

// Good: cached accessor on the model
public function ordersTrend(): array
{
    return Cache::remember("orders.trend.{$this->id}", now()->addHour(), fn () =>
        $this->orders()
            ->where('created_at', '>=', now()->subDays(30))
            ->selectRaw('DATE(created_at) as d, COUNT(*) as c')
            ->groupBy('d')->orderBy('d')->pluck('c')->all()
    );
}

// Bad: per-row aggregation inside the column
->data(fn ($record) => $record->orders()->pluck('total')->all())

If the data is genuinely expensive, denormalise: a trend_data JSON column written by a scheduled command or observer. The column stays purely presentational.

Centralise the column in a wrapper. The same chart will appear in a resource table, a dashboard widget, and possibly a relation manager. One definition means a 3.x API change is a one-file fix, and it's your migration seam if the package is ever abandoned:

namespace App\Filament\Columns;

class TrendColumn
{
    public static function make(string $name, string $label, string $color = 'primary')
    {
        return \LaraZeus\InlineChart\InlineChartColumn::make($name)
            ->label($label)
            ->chartType('line')
            ->height(28)
            ->color($color);
    }
}

Pick chart type per intent, and keep series short. Line/sparkline for direction, bar for discrete periods. 7–30 points reads fine at 28px; 365 points is noise and wasted client work. Downsample before handing data over.

Colour from the Filament palette. Pass 'primary', 'success', 'danger' rather than hex so dark mode and panel theming apply for free. Hex looks fine in light mode and vanishes in dark.

Treat empty and single-point series as real states. Decide what renders for 0 data points and assert it against a factory record with []. This is the classic silent failure — a blank cell nobody notices until an operator reports it.

Test for presence, not pixels.

livewire(ListOrders::class)
    ->assertSuccessful()
    ->assertTableColumnExists('orders_trend');

Then do the visual pass manually — you cannot meaningfully assert a sparkline's shape in PHP.

Decide export behaviour explicitly. In a table that also exports CSV/XLSX, a chart column emits the raw array or nothing. Either provide a formatted fallback or exclude it.

Gotchas and Tips

The N+1 trap is the entire performance story. A 25-row table with a per-row aggregation closure is 25 extra queries per page load. Fix it before it ships — retrofitting after a table gets slow is far harder to spot than preventing it.

Re-publish assets after the upgrade. Filament 5 changed theming. A blank or unstyled chart immediately after a Composer bump is almost always a stale/unpublished asset, not a logic bug. Publish, clear view cache, hard-refresh.

One broken column can take the whole table with it. A JS exception in a single chart cell can degrade the entire table render. When "my table went blank," disable chart columns one at a time to isolate rather than blaming the table.

Check where Chart.js comes from. A CDN pull is a CSP finding and a supply-chain dependency, and it won't render in an air-gapped or strictly-CSP admin. If it's a published asset, note the version so you can audit it later.

The one-line changelog means manual verification per release. Read the diff, not the release note. Budget a review point aligned to Filament's major cadence.

Single maintainer, 23 stars, zero dependents. You are the early verifier of the Filament 5 path, not a follower — no downstream community has already found the edge cases. Mitigation is cheap: keep the TrendColumn wrapper, treat the package as swappable. Reimplementing it as a hand-rolled Chart.js column is a couple of days, which is why buying is fine here.

Sorting and filtering don't apply. It's a rendered visual, not a database-backed value. Don't mark it sortable(); be deliberate about hidden()/toggleable() so operators can turn it off on narrow screens.

Scope discipline is the real lesson. The moment you want cross-filtering, drill-down, axes, or a data-table tooltip, you've outgrown this package. It's an at-a-glance trend column — reach for a real charting library the first time you need to ask a question of the chart rather than just look at it.