Tayo
v1.0
Toggle sidebar
Tayo

Props Reference

All available props for the x-tayo::chart component.

type

required

string

Chart type key. See chart types in the sidebar.

data

null

array|null

Chart data. Structure depends on the chart type.

height

320

int

Height of the chart canvas in pixels.

colors

'default'

string|array

Named palette or array of hex strings.

title

null

string|null

Optional heading rendered above the chart.

subtitle

null

string|null

Optional sub-heading rendered below the title.

Example

blade 
<x-tayo::chart
    type="bar"
    :data="$chartData"
    :height="320"
    colors="ocean"
    title="Monthly Revenue"
    subtitle="Jan – Dec 2024"
/>

Livewire reactivity

Pass data from a plain getter property. It re-evaluates on every render, so the chart always reflects the latest public property state.

SalesChart.blade.php 
new #[Layout('layouts.app')] class extends Component
{
    public string $period = 'monthly';

    public function getChartDataProperty(): array
    {
        return Sale::forPeriod($this->period)
            ->get()
            ->map(fn ($s) => ['label' => $s->label, 'value' => $s->total])
            ->toArray();
    }
}
template 
<flux:select wire:model.live="period" label="Period">
    <flux:select.option value="monthly">Monthly</flux:select.option>
    <flux:select.option value="quarterly">Quarterly</flux:select.option>
</flux:select>

<x-tayo::chart
    type="bar"
    :data="$this->chartData"
    title="Sales"
/>