Chart

Responsive Alpine charts with shadcn-style config, tooltips, legends, and theme tokens.

Monthly visitors

Desktop and mobile visitors for the last six months.

Visitor trend

The same data, displayed as an area chart.

Component Code 
@php
    $activity = [
        ['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],
    ];
 
    $activityConfig = [
        'desktop' => ['label' => 'Desktop', 'color' => 'var(--chart-1)'],
        'mobile' => ['label' => 'Mobile', 'color' => 'var(--chart-2)'],
    ];
@endphp
 
<div class="grid gap-6 lg:grid-cols-2">
    <april:chart label="Monthly visitors" :data="$activity" :config="$activityConfig" xKey="month">
        <slot:header>
            <h3 class="font-semibold">Monthly visitors</h3>
            <p class="text-sm text-muted-foreground">Desktop and mobile visitors for the last six months.</p>
        </slot:header>
    </april:chart>
 
    <april:chart label="Visitor trend" :data="$activity" :config="$activityConfig" xKey="month" type="area" class="bg-muted/30">
        <slot:header>
            <h3 class="font-semibold">Visitor trend</h3>
            <p class="text-sm text-muted-foreground">The same data, displayed as an area chart.</p>
        </slot:header>
    </april:chart>
</div>

Charts follow shadcn's data/config model. data holds the values while config holds labels and colors. The chart draws a grid, axes, legend, and hover or keyboard tooltip without a JavaScript chart dependency.

@php
    $data = [
        ['month' => 'Jan', 'desktop' => 186, 'mobile' => 80],
        ['month' => 'Feb', 'desktop' => 305, 'mobile' => 200],
    ];
 
    $config = [
        'desktop' => ['label' => 'Desktop', 'color' => 'var(--chart-1)'],
        'mobile' => ['label' => 'Mobile', 'color' => 'var(--chart-2)'],
    ];
@endphp
 
<april:chart label="Monthly visitors" :data="$data" :config="$config" xKey="month">
    <slot:header>
        <h3>Monthly visitors</h3>
    </slot:header>
</april:chart>

Set type="line" or type="area" to change the chart geometry. The default is bar. The five theme-aware color tokens are var(--chart-1) through var(--chart-5).

Use the left and right arrow keys while the chart is focused to inspect each data point. The existing chart-bar component remains available as a static fallback when you do not pass data.

Publishing Views

Use the following commands to publish these views:

php artisan april:publish chart
php artisan april:publish chart-bar
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.