# Chart

Beautiful charts, built using ApexCharts.

- Install: `php artisan blatui:add chart`
- Source: https://blatui.remix-it.com/r/chart.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`
- npm: `npm install -D apexcharts`

## resources/views/components/ui/chart.blade.php

```blade
@props([
    'type' => 'line',
    'series' => [],
    'options' => [],
    'colors' => [],
    'config' => [],
    'labels' => [],
    'height' => 250,
    'label' => 'Chart',
])

@php
    // shadcn-style config: ['key' => ['label' => '...', 'color' => 'var(--chart-1)']]
    // Derive the colors array + the --color-<key> CSS vars used by labels/legends.
    $resolvedColors = $colors;
    if (empty($resolvedColors) && ! empty($config)) {
        $resolvedColors = array_values(array_filter(array_map(fn ($c) => $c['color'] ?? null, $config)));
    }

    $styleVars = collect($config)
        ->filter(fn ($v) => is_array($v) && isset($v['color']))
        ->map(fn ($v, $k) => "--color-{$k}: {$v['color']};")
        ->implode(' ');

    $payload = [
        'type' => $type,
        'series' => $series,
        'options' => $options,
        'colors' => $resolvedColors,
        'height' => (int) $height,
    ];
    if (! empty($labels)) {
        $payload['labels'] = $labels;
    }
@endphp

<div
    data-slot="chart"
    role="img"
    aria-label="{{ $label }}"
    style="{{ $styleVars }}"
    x-data="shadcnChart({{ \Illuminate\Support\Js::from($payload) }})"
    {{ $attributes->twMerge('flex aspect-video justify-center text-xs w-full [&_.apexcharts-tooltip]:!rounded-lg [&_.apexcharts-tooltip]:!border [&_.apexcharts-tooltip]:!border-border [&_.apexcharts-tooltip]:!bg-popover [&_.apexcharts-tooltip]:!text-popover-foreground [&_.apexcharts-tooltip]:!shadow-xl') }}
>
    <div x-ref="canvas" class="w-full" style="min-height: {{ (int) $height }}px"></div>
</div>
```

## resources/views/components/ui/chart-container.blade.php

```blade
@props([
    'config' => [],
    'id' => null,
])

@php
    $chartId = $id ?? 'chart-'.\Illuminate\Support\Str::random(8);
    $styleVars = collect($config)
        ->filter(fn ($v) => is_array($v) && isset($v['color']))
        ->map(fn ($v, $k) => "--color-{$k}: {$v['color']};")
        ->implode(' ');
@endphp

<div
    data-slot="chart"
    data-chart="{{ $chartId }}"
    style="{{ $styleVars }}"
    {{ $attributes->twMerge("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-none") }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/chart-tooltip-content.blade.php

```blade
<div data-slot="chart-tooltip-content" {{ $attributes->twMerge('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl') }}>
    {{ $slot }}
</div>
```