- Components
- radar
Radar
Radar charts to compare profiles across several measures.
Simple
Each row is an axis. max
sets the top of every axis — 100
for percentages.
| Skill | Level |
|---|---|
| Blade | 90 |
| Livewire | 80 |
| Alpine | 70 |
| Tailwind | 95 |
| Testing | 65 |
@php
$skills = [
['skill' => 'Blade', 'level' => 90],
['skill' => 'Livewire', 'level' => 80],
['skill' => 'Alpine', 'level' => 70],
['skill' => 'Tailwind', 'level' => 95],
['skill' => 'Testing', 'level' => 65],
];
@endphp
<x-ui.echart type="radar" max="100" :data="$skills" index="skill" label="Team skills" class="h-72 w-full max-w-md"
:config="['level' => ['label' => 'Level']]" />
Comparing profiles
Each series is a shape.
| Metric | Flexiwind | Average kit |
|---|---|---|
| Performance | 92 | 71 |
| Accessibility | 96 | 68 |
| Bundle size | 88 | 55 |
| Theming | 94 | 62 |
| Docs | 85 | 74 |
@php
$scores = [
['metric' => 'Performance', 'flexiwind' => 92, 'average' => 71],
['metric' => 'Accessibility', 'flexiwind' => 96, 'average' => 68],
['metric' => 'Bundle size', 'flexiwind' => 88, 'average' => 55],
['metric' => 'Theming', 'flexiwind' => 94, 'average' => 62],
['metric' => 'Docs', 'flexiwind' => 85, 'average' => 74],
];
@endphp
<x-ui.echart type="radar" max="100" :data="$scores" index="metric" label="Scores compared" class="h-80 w-full max-w-md" :config="[
'flexiwind' => ['label' => 'Flexiwind'],
'average' => ['label' => 'Average kit'],
]" />
See Chart for installation and every prop.