Chart

Demo

@php
    $visitors = [
        ['month' => 'Jan', 'desktop' => 186, 'mobile' => 80],
        ['month' => 'Feb', 'desktop' => 305, 'mobile' => 200],
        ['month' => 'Mar', 'desktop' => 237, 'mobile' => 120],
        ['month' => 'Apr', 'desktop' => 73, 'mobile' => 190],
        ['month' => 'May', 'desktop' => 209, 'mobile' => 130],
        ['month' => 'Jun', 'desktop' => 214, 'mobile' => 140],
    ];
@endphp

<div class="w-full max-w-xl rounded-xl border border-border bg-background p-5">
    <p class="font-medium text-foreground">Monthly visitors</p>
    <p class="text-sm text-muted-foreground">January – June 2026</p>

    <x-ui.chart :data="$visitors" index="month" label="Monthly visitors" class="mt-5 h-64" :config="[
        'desktop' => ['label' => 'Desktop', 'color' => 'var(--chart-1)'],
        'mobile' => ['label' => 'Mobile', 'color' => 'var(--chart-2)'],
    ]" />
</div>

Installation

php artisan flexi:add chart

This adds the Blade views under resources/views/components/ui/chart , the App\Flexiwind\ChartHelper class that computes the geometry, and a small script, resources/js/plugins/chart.js , for tooltips and interactions. Register it once next to the other Flexiwind plugins:

import { ChartPlugin } from "./plugins/chart";

Alpine.plugin(ChartPlugin);

Without Alpine, call initChartInteractions() from the same file once. There is nothing to set up per chart, and charts replaced by Livewire keep working.

Chart types

Two companions live next to the chart for dashboards: Sparkline , a tiny trend for KPI cards, and Tracker , a row of status blocks.

Need zoom on a long time series, candlesticks, a heatmap or thousands of points? The ECharts plugin takes the same data and draws it with Apache ECharts.

Why no chart library

The chart is drawn on the server: bars and points are positioned in percentages, lines are SVG paths in a stretched viewBox. That means:

• Almost nothing to load. No chart library: the chart script weighs about 3 KB gzipped, and the chart is fully drawn before it runs.
• Livewire just works. When the data changes, Livewire morphs the HTML and the bars animate to their new height.
• Your theme applies. Colors are CSS variables, so dark mode and themes follow without code.
• Readable without sight. Every chart carries a hidden data table for screen readers.

Data and config

data is a list of rows, one per category — the shape an Eloquent query or collect() already gives you. index names the category column. config lists the series to draw, in order, with their label and color.

@php
    $data = [
        ['month' => 'Jan', 'desktop' => 186, 'mobile' => 80],
        ['month' => 'Feb', 'desktop' => 305, 'mobile' => 200],
    ];
@endphp

<x-ui.chart :data="$data" index="month" :config="[
    'desktop' => ['label' => 'Desktop', 'color' => 'var(--chart-1)'],
    'mobile' => ['label' => 'Mobile', 'color' => 'var(--chart-2)'],
]" />

Without config , every numeric column becomes a series and colors cycle through --chart-1 to --chart-5 . A null value is shown as missing, never as zero.

Pie, donut and radial charts color categories rather than series, so their config is keyed by category: 'chrome' => ['label' => 'Chrome', 'color' => …] .

Composition

Without content, <x-ui.chart> draws a complete chart for its type . Give it content and it becomes a frame: each layer is a component you can keep, remove, reorder or restyle with classes. Layers stack in the order you write them.

@php
    $revenue = [
        ['month' => 'Jan', 'revenue' => 12400, 'target' => 11000],
        ['month' => 'Feb', 'revenue' => 13900, 'target' => 12000],
        ['month' => 'Mar', 'revenue' => 11800, 'target' => 13000],
        ['month' => 'Apr', 'revenue' => 16200, 'target' => 14000],
        ['month' => 'May', 'revenue' => 17800, 'target' => 15000],
        ['month' => 'Jun', 'revenue' => 19400, 'target' => 16000],
    ];
@endphp

<x-ui.chart :data="$revenue" index="month" prefix="€" label="Revenue against target" class="h-64 w-full max-w-xl" :config="[
    'revenue' => ['label' => 'Revenue', 'color' => 'var(--chart-1)'],
    'target' => ['label' => 'Target', 'color' => 'var(--chart-2)'],
]">
    <x-ui.chart.grid />
    <x-ui.chart.y-axis class="text-[11px]" />
    <x-ui.chart.x-axis />
    <x-ui.chart.bar only="revenue" :radius="8" :gap="0.45" />
    <x-ui.chart.line only="target" curve="linear" :dots="false" :stroke-width="2.5" />
    <x-ui.chart.tooltip />
</x-ui.chart>

Interactions

Every bar, line and area chart gets a hover tooltip, and tapping a category shows it on touch screens. A chart has a single tooltip, whatever its number of categories: the script fills it from the chart's data table as the pointer moves, so a year of daily data does not add hundreds of hidden panels to the page.

Mark a chart interactive to add:

• Keyboard: tab into the chart, then use the arrow keys, Home and End. Screen readers announce each value.
• Legend toggle: click a series in the legend to hide or show it. The value axis keeps its scale.
• CSV export: put data-chart-export="#chart-id" on any button. Values are exported raw — 1250 , not 1.3k .

@php
    $revenue = [
        ['month' => 'Jan', 'subscriptions' => 12400, 'services' => 5200, 'licenses' => 3100],
        ['month' => 'Feb', 'subscriptions' => 13900, 'services' => 4800, 'licenses' => 3600],
        ['month' => 'Mar', 'subscriptions' => 11800, 'services' => 6100, 'licenses' => 2900],
        ['month' => 'Apr', 'subscriptions' => 16200, 'services' => 5600, 'licenses' => 4200],
        ['month' => 'May', 'subscriptions' => 17800, 'services' => 7300, 'licenses' => 3900],
        ['month' => 'Jun', 'subscriptions' => 19400, 'services' => 6900, 'licenses' => 4800],
    ];
@endphp

<div class="w-full max-w-xl rounded-xl border border-border bg-background p-5">
    <div class="flex items-start justify-between gap-4">
        <div>
            <p class="font-medium text-foreground">Revenue by stream</p>
            <p class="text-sm text-muted-foreground">Tab into the chart, then use the arrow keys.</p>
        </div>
        <x-ui.button variant="outline" intent="gray" size="sm" data-chart-export="#revenue-streams" data-chart-filename="revenue.csv">
            Export CSV
        </x-ui.button>
    </div>

    <x-ui.chart id="revenue-streams" interactive stacked :data="$revenue" index="month" prefix="€" label="Revenue by stream"
        class="mt-5 h-64" :config="[
            'subscriptions' => ['label' => 'Subscriptions', 'color' => 'var(--chart-1)'],
            'services' => ['label' => 'Services', 'color' => 'var(--chart-2)'],
            'licenses' => ['label' => 'Licenses', 'color' => 'var(--chart-4)'],
        ]" />
</div>

Without the script, the chart is still drawn and its data table is still read by screen readers; only the tooltip and the interactions are missing.

Range selection

Add brush and the chart lets people select a range of categories: drag across it, or hold Shift with the arrow keys and press Enter. It then emits a chart-range DOM event:

{ start: 12, end: 30, from: "Jul 13", to: "Jul 31" }

start and end are indexes in what the chart shows. A double-click emits the same event with null values, to go back.

Listen to it from Livewire and recompute the data on the server — the scale follows the zoom. Drag across this chart:

<x-ui.chart type="area" brush :data="$days" index="day"
    wire:chart-range="zoom($event.detail.start, $event.detail.end)" />

#[Locked]
public int $from = 0;

#[Locked]
public int $to = 89;

public function zoom(mixed $start = null, mixed $end = null): void
{
    if ($start === null || $end === null) {
        $this->reset('from', 'to');

        return;
    }

    // Indexes come from the browser: check them before using them.
    if (! is_int($start) || ! is_int($end) || $start < 0 || $end <= $start || $end > $this->to - $this->from) {
        return;
    }

    [$this->from, $this->to] = [$this->from + $start, $this->from + $end];
}

With Alpine instead of Livewire: x-on:chart-range="range = $event.detail" .

Theming

Series colors come from five CSS variables defined by your theme, --chart-1 to --chart-5 . They are assigned in order: the first series always takes --chart-1 , the second --chart-2 , and so on — a color follows the series, not its rank.

--chart-1 is your theme's primary color, so a single-series chart matches your brand. The four others are distinct hues chosen for each theme, not tints of the primary: two shades of the same color are hard to tell apart in a legend. Every theme's palette is checked in light and dark mode for:

• Color blindness: neighboring colors stay distinct under protanopia and deuteranopia.
• Normal vision: neighbors are clearly different, and no hue appears twice.
• Pies: the last slice touches the first, so that pair is checked too.

:root {
    --chart-1: var(--primary);
    --chart-2: #eb6834;
    --chart-3: #1baf7a;
    --chart-4: #eda100;
    --chart-5: #e87ba4;
}

Beyond five series, a chart gets hard to read: group the smallest into "Other" rather than adding colors. Any CSS color also works in config — #6366f1 , oklch(62% 0.2 264) , var(--success) — but status colors such as --success or --destructive are best kept for series that mean good or bad.

API

Chart

Size the chart with a height class on the component: class="h-80" .

Layers

Accessibility

The drawing is hidden from assistive technologies. Instead, the chart renders a visually hidden <table> with a caption taken from label , one row per category and one column per series. Always give your chart a meaningful label .