- Components
- pie
Pie
Pie and donut charts for shares of a whole.
Simple
A pie reads the first numeric column: one slice per row. Hovering a slice lifts it.
| 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
<x-ui.echart type="pie" :data="$browsers" index="browser" label="Visitors by browser" class="h-72 w-full max-w-md" />
Donut, legend on the side
type="donut"
opens the center. Here options
moves the legend to the right and the donut to the left.
| Kind | Gb |
|---|---|
| Images | 38.2 GB |
| Videos | 21.7 GB |
| Documents | 9.4 GB |
| Archives | 6.1 GB |
@php
$storage = [
['kind' => 'Images', 'gb' => 38.2],
['kind' => 'Videos', 'gb' => 21.7],
['kind' => 'Documents', 'gb' => 9.4],
['kind' => 'Archives', 'gb' => 6.1],
];
@endphp
{{-- `options` reaches anything ECharts supports: here, the legend moves to the right. --}}
<x-ui.echart type="donut" :data="$storage" index="kind" suffix=" GB" format="number" label="Storage by file type" class="h-72 w-full max-w-lg" :options="[
'legend' => ['orient' => 'vertical', 'right' => 0, 'top' => 'middle', 'bottom' => null],
'series' => [['center' => ['38%', '50%']]],
]" />
See Chart for installation and every prop.