Components

Chart

Beautiful charts, built using ApexCharts.

php artisan blatui:add chart

<div class="w-full max-w-lg">
    <x-ui.chart
        type="bar"
        :config="['desktop' => ['label' => 'Desktop', 'color' => 'var(--chart-1)']]"
        :series="[['name' => 'Desktop', 'data' => [186, 305, 237, 73, 209, 214]]]"
        :colors="['var(--chart-1)']"
        :options="[
            'xaxis' => ['categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']],
            'plotOptions' => ['bar' => ['borderRadius' => 8, 'columnWidth' => '60%']],
            'yaxis' => ['show' => false],
        ]"
        class="aspect-auto h-[250px]"
    />
</div>

Area

<div class="w-full max-w-lg">
    <x-ui.chart
        type="area"
        :config="['desktop' => ['label' => 'Desktop', 'color' => 'var(--chart-1)']]"
        :series="[['name' => 'Desktop', 'data' => [186, 305, 237, 73, 209, 214]]]"
        :colors="['var(--chart-1)']"
        :options="[
            'xaxis' => ['categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']],
            'fill' => ['type' => 'gradient', 'gradient' => ['shadeIntensity' => 1, 'opacityFrom' => 0.4, 'opacityTo' => 0.1, 'stops' => [0, 100]]],
            'stroke' => ['width' => 2, 'curve' => 'smooth'],
            'yaxis' => ['show' => false],
        ]"
        class="aspect-auto h-[250px]"
    />
</div>

API Reference

Props, slots and exposed methods for <x-ui.chart>.

Props

Prop	Type	Default	Description
`series`*	`array`	`[]`	The data the chart renders, in ApexCharts series format. Each entry is a named data set. See Each series below.
`type`	`string`	`'line'`	The ApexCharts chart type, e.g. line, area, bar, donut, radar. Passed straight through to ApexCharts.
`config`	`array`	`[]`	shadcn-style series config keyed by series key. Each value supplies a label and color; the colors derive the chart palette and emit --color-<key> CSS vars for legends. See Each config entry below.
`colors`	`array`	`[]`	Explicit fill/stroke colors for the series (CSS colors or var() references). When omitted, colors are derived from config.
`options`	`array`	`[]`	Raw ApexCharts options merged into the chart config, e.g. xaxis categories, plotOptions, stroke, fill, yaxis.
`labels`	`array`	`[]`	Category labels for chart types that use a flat labels array (e.g. donut, pie, radial). Omitted from the payload when empty.
`height`	`int`	`250`	Chart height in pixels. Also sets the canvas min-height.
`label`	`string`	`'Chart'`	Accessible name for the chart container (role="img" aria-label).

* Required.

Each series

Prop	Type	Default	Description
`name`	`string`	—	The series name, shown in tooltips and the legend.
`data`*	`array`	—	The data points for this series — an array of numbers, or [x, y] pairs / { x, y } objects depending on the chart type.

Each config entry

Prop	Type	Default	Description
`label`	`string`	—	Human-readable label for this series key.
`color`	`string`	—	CSS color for this key (e.g. "var(--chart-1)"). Feeds the derived palette and the --color-<key> CSS var.