Get started
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Chart

A minimal CSS bar chart with no charting library. Pass a JSON data prop or compose chart-bar children. Use label (or aria-label) for an accessible name; JSON charts include a screen-reader table of values.

Usage
example.blade.php 
<x-slate::chart label="Monthly signups" :data="[
    ['label' => 'Jan', 'value' => 40],
    ['label' => 'Feb', 'value' => 65],
    ['label' => 'Mar', 'value' => 50],
    ['label' => 'Apr', 'value' => 80],
]" />

Composed bars

Use chart-bar when you want explicit control over each column.

example.blade.php 
<x-slate::chart class="h-48">
    <x-slate::chart-bar label="Q1" :value="30" />
    <x-slate::chart-bar label="Q2" :value="55" />
    <x-slate::chart-bar label="Q3" :value="45" />
    <x-slate::chart-bar label="Q4" :value="70" />
</x-slate::chart>

In a card

Charts sit well inside cards for dashboard blocks.

Signups
Last four months
example.blade.php 
<x-slate::card class="max-w-md">
    <x-slate::card-header>
        <x-slate::card-title>Signups</x-slate::card-title>
        <x-slate::card-description>Last four months</x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content>
        <x-slate::chart class="h-40" :data="[
            ['label' => 'May', 'value' => 24],
            ['label' => 'Jun', 'value' => 36],
            ['label' => 'Jul', 'value' => 31],
            ['label' => 'Aug', 'value' => 48],
        ]" />
    </x-slate::card-content>
</x-slate::card>

Composition
code 
Chart
└── ChartBar (repeat, or data prop)
Last updated . · Legal