- Components
- pie
Pie Chart
Pie and donut charts for shares of a whole.
Demo
| Browser | Visitors |
|---|---|
| chrome | 275 |
| safari | 200 |
| firefox | 187 |
| edge | 173 |
| other | 90 |
@php
$browsers = [
['browser' => 'chrome', 'visitors' => 275],
['browser' => 'safari', 'visitors' => 200],
['browser' => 'firefox', 'visitors' => 187],
['browser' => 'edge', 'visitors' => 173],
['browser' => 'other', 'visitors' => 90],
];
@endphp
{{-- For a pie, `config` is keyed by category: each slice gets its label and color. --}}
<x-ui.chart type="pie" :data="$browsers" index="browser" label="Visitors by browser" class="h-72 w-full max-w-sm" :config="[
'chrome' => ['label' => 'Chrome', 'color' => 'var(--chart-1)'],
'safari' => ['label' => 'Safari', 'color' => 'var(--chart-2)'],
'firefox' => ['label' => 'Firefox', 'color' => 'var(--chart-3)'],
'edge' => ['label' => 'Edge', 'color' => 'var(--chart-4)'],
'other' => ['label' => 'Other', 'color' => 'var(--chart-5)'],
]" />
Installation
Shell
php artisan flexi:add chart
Set type="pie"
or type="donut"
. See
Chart
for the data model.
A pie draws the first numeric series: one slice per row. Its config
is keyed by category, so each slice gets its own label and color. Zero, negative and missing values get no slice. Hovering a slice fades the others and shows its value and share.
Donut
The center shows the total by default.
776
Total
| Plan | Customers |
|---|---|
| Solo | 412 |
| Solo Lifetime | 268 |
| Team Lifetime | 96 |
@php
$plans = [
['plan' => 'Solo', 'customers' => 412],
['plan' => 'Solo Lifetime', 'customers' => 268],
['plan' => 'Team Lifetime', 'customers' => 96],
];
@endphp
<x-ui.chart type="donut" :data="$plans" index="plan" label="Customers by plan" class="h-72 w-full max-w-sm" />
Custom center
Use the <x-ui.chart.pie>
layer and put anything in its slot. inner
sets the size of the hole.
72%
renewed
| Status | Accounts |
|---|---|
| Renewed | 312 |
| Churned | 58 |
| Pending | 64 |
@php
$renewals = [
['status' => 'Renewed', 'accounts' => 312],
['status' => 'Churned', 'accounts' => 58],
['status' => 'Pending', 'accounts' => 64],
];
@endphp
<x-ui.chart type="donut" :data="$renewals" index="status" label="Renewals this quarter" :legend="true" class="h-64 w-full max-w-sm" :config="[
'Renewed' => ['color' => 'var(--success)'],
'Churned' => ['color' => 'var(--destructive)'],
'Pending' => ['color' => 'var(--muted-foreground)'],
]">
<x-ui.chart.pie :inner="0.72">
<span class="text-3xl font-semibold tracking-tight text-foreground">72%</span>
<span class="text-xs text-muted-foreground">renewed</span>
</x-ui.chart.pie>
</x-ui.chart>
Props
Props of the <x-ui.chart.pie />
layer.
| Prop | Description |
|---|---|
inner
(float)
|
Hole size, from 0
(pie) to 0.9
. Defaults to 0.62
for a donut.
|
series
(string)
|
Column to draw when the rows have several. Defaults to the first one. |
center-label
(string)
|
Caption under the total. Defaults to Total
.
|