- Components
- radial
Radial Chart
Progress rings and gauges.
Demo
| Goal | Progress |
|---|---|
| Move | 82% |
| Exercise | 64% |
| Stand | 45% |
@php
$goals = [
['goal' => 'Move', 'progress' => 82],
['goal' => 'Exercise', 'progress' => 64],
['goal' => 'Stand', 'progress' => 45],
];
@endphp
<x-ui.chart type="radial" :data="$goals" index="goal" suffix="%" label="Daily goals" class="h-64 w-full max-w-sm" />
Installation
Shell
php artisan flexi:add chart
Set type="radial"
. Each row becomes a ring, from the outside in. A ring is full when its value reaches max
— 100
by default, so percentages work as they are. Values above max
stay full.
Single ring and gauge
With one ring, the center shows its value. Add half
on the layer for a semicircle gauge.
38 GB
Storage used
| Metric | Gb |
|---|---|
| Storage used | 38 GB |
78
Performance
| Metric | Value |
|---|---|
| Score | 78 |
<div class="flex flex-wrap items-center justify-center gap-8">
<x-ui.chart type="radial" :data="[['metric' => 'Storage used', 'gb' => 38]]" index="metric" max="50" suffix=" GB"
label="Storage used" class="h-44 w-44" :config="['Storage used' => ['color' => 'var(--chart-1)']]" />
<x-ui.chart type="radial" :data="[['metric' => 'Score', 'value' => 78]]" index="metric" label="Performance score" class="h-32 w-56"
:config="['Score' => ['color' => 'var(--success)']]">
<x-ui.chart.radial half :thickness="0.18">
<span class="text-2xl font-semibold tracking-tight text-foreground">78</span>
<span class="text-xs text-muted-foreground">Performance</span>
</x-ui.chart.radial>
</x-ui.chart>
</div>
Props
Props of the <x-ui.chart.radial />
layer.
| Prop | Description |
|---|---|
thickness
(float)
|
Ring thickness, as a share of the radius. Defaults to 0.14
.
|
gap
(float)
|
Space between rings. Defaults to 0.05
.
|
half
(boolean)
|
Draws a semicircle gauge. |
track
(boolean)
|
The faint ring behind each value. Defaults to true
.
|
series
(string)
|
Column to read when the rows have several. |