Logo Beartropy Charts
Radar Chart
The x-bt-radar-chart component creates beautiful spider/web charts for multivariate data visualization.
Perfect for comparing multiple datasets across several variables, with support for filled areas, custom grids, and interactive legends.

Simple Radar Chart

Create a basic radar chart with a single dataset by passing an array with labeled metrics.

Product Evaluation

Product A Speed: 85 85 Quality: 90 90 Price: 60 60 Design: 75 75 Support: 80 80 Speed Quality Price Design Support
Product A
Speed 85
Quality 90
Price 60
Design 75
Support 80 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Product A',
 5            'Speed' => 85,
 6            'Quality' => 90,
 7            'Price' => 60,
 8            'Design' => 75,
 9            'Support' => 80,
10        ],
11    ]"
12    title="Product Evaluation"
13/>

Multiple Datasets Comparison

Compare multiple datasets by providing an array of data objects, each with its own label and color.

Product Comparison

Product A Speed: 85 85 Quality: 90 90 Price: 60 60 Design: 75 75 Support: 80 80 Product B Speed: 70 70 Quality: 85 85 Price: 90 90 Design: 65 65 Support: 70 70 Speed Quality Price Design Support
Product A
Speed 85
Quality 90
Price 60
Design 75
Support 80
Product B
Speed 70
Quality 85
Price 90
Design 65
Support 70 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Product A',
 5            'color' => 'blue',
 6            'Speed' => 85,
 7            'Quality' => 90,
 8            'Price' => 60,
 9            'Design' => 75,
10            'Support' => 80,
11        ],
12        [
13            'label' => 'Product B',
14            'color' => 'red',
15            'Speed' => 70,
16            'Quality' => 85,
17            'Price' => 90,
18            'Design' => 65,
19            'Support' => 70,
20        ],
21    ]"
22    title="Product Comparison"
23    legend-position="bottom"
24/>

Nested Data Structure

Use a nested data property to organize your metrics in a structured format.

Team Metrics

Team Performance Communication: 95 95 Collaboration: 88 88 Innovation: 92 92 Efficiency: 85 85 Quality: 90 90 Communication Collaboration Innovation Efficiency Quality
Team Performance
Communication 95
Collaboration 88
Innovation 92
Efficiency 85
Quality 90 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Team Performance',
 5            'color' => 'green',
 6            'data' => [
 7                'Communication' => 95,
 8                'Collaboration' => 88,
 9                'Innovation' => 92,
10                'Efficiency' => 85,
11                'Quality' => 90,
12            ],
13        ],
14    ]"
15    title="Team Metrics"
16/>

Year-over-Year Comparison

Compare performance across different time periods with custom colors and legend positioning.

Year-over-Year Growth

Current Year Q1: 75 75 Q2: 82 82 Q3: 88 88 Q4: 95 95 Previous Year Q1: 65 65 Q2: 70 70 Q3: 75 75 Q4: 80 80 Q1 Q2 Q3 Q4
Current Year
Q1 75
Q2 82
Q3 88
Q4 95
Previous Year
Q1 65
Q2 70
Q3 75
Q4 80 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Current Year',
 5            'color' => 'emerald',
 6            'Q1' => 75,
 7            'Q2' => 82,
 8            'Q3' => 88,
 9            'Q4' => 95,
10        ],
11        [
12            'label' => 'Previous Year',
13            'color' => 'gray',
14            'Q1' => 65,
15            'Q2' => 70,
16            'Q3' => 75,
17            'Q4' => 80,
18        ],
19    ]"
20    title="Year-over-Year Growth"
21    legend-position="right"
22    height="h-96"
23/>

Radar Chart with CSS Colors

Use CSS color values (hex, rgb, hsl) for precise color control across multiple datasets.

Skills Assessment

Frontend HTML: 95 95 CSS: 90 90 JavaScript: 88 88 TypeScript: 75 75 React: 85 85 Backend HTML: 0 0 CSS: 0 0 JavaScript: 0 0 TypeScript: 0 0 React: 0 0 HTML CSS JavaScript TypeScript React
Frontend
HTML 95
CSS 90
JavaScript 88
TypeScript 75
React 85
Backend
HTML 0
CSS 0
JavaScript 0
TypeScript 0
React 0 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Frontend',
 5            'color' => '#3b82f6',
 6            'HTML' => 95,
 7            'CSS' => 90,
 8            'JavaScript' => 88,
 9            'TypeScript' => 75,
10            'React' => 85,
11        ],
12        [
13            'label' => 'Backend',
14            'color' => '#10b981',
15            'PHP' => 92,
16            'Python' => 78,
17            'Node.js' => 85,
18            'SQL' => 90,
19            'APIs' => 88,
20        ],
21    ]"
22    title="Skills Assessment"
23    legend-position="bottom"
24/>

Radar Chart Without Labels

Hide axis labels and adjust grid levels for a cleaner visualization.

Athlete Performance

Player Stats Speed: 88 88 Strength: 75 75 Agility: 92 92 Stamina: 85 85 Accuracy: 90 90
Player Stats
Speed 88
Strength 75
Agility 92
Stamina 85
Accuracy 90 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Player Stats',
 5            'Speed' => 88,
 6            'Strength' => 75,
 7            'Agility' => 92,
 8            'Stamina' => 85,
 9            'Accuracy' => 90,
10        ],
11    ]"
12    title="Athlete Performance"
13    :show-labels="false"
14    legend-position="right"
15    :grid-levels="5"
16    height="h-80"
17/>

Minimal Radar Chart

Create a minimal chart without grid and axes for a clean appearance.

Performance Dashboard

Metrics Metric 1: 70 70 Metric 2: 85 85 Metric 3: 92 92 Metric 4: 78 78 Metric 5: 88 88 Metric 1 Metric 2 Metric 3 Metric 4 Metric 5
Metrics
Metric 1 70
Metric 2 85
Metric 3 92
Metric 4 78
Metric 5 88 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Metrics',
 5            'Metric 1' => 70,
 6            'Metric 2' => 85,
 7            'Metric 3' => 92,
 8            'Metric 4' => 78,
 9            'Metric 5' => 88,
10        ],
11    ]"
12    title="Performance Dashboard"
13    :show-grid="false"
14    :show-axes="false"
15    chart-color="purple"
16    legend-position="bottom"
17/>

Radar Chart with Custom Fill

Adjust the fill area opacity to create overlapping transparent polygons for better comparison.

Decision Matrix

Option A Cost: 60 60 Time: 85 85 Quality: 95 95 Risk: 40 40 Option B Cost: 80 80 Time: 70 70 Quality: 85 85 Risk: 60 60 Cost Time Quality Risk
Option A
Cost 60
Time 85
Quality 95
Risk 40
Option B
Cost 80
Time 70
Quality 85
Risk 60 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Option A',
 5            'Cost' => 60,
 6            'Time' => 85,
 7            'Quality' => 95,
 8            'Risk' => 40,
 9        ],
10        [
11            'label' => 'Option B',
12            'Cost' => 80,
13            'Time' => 70,
14            'Quality' => 85,
15            'Risk' => 60,
16        ],
17    ]"
18    title="Decision Matrix"
19    :fill-area="true"
20    :fill-opacity="0.3"
21    :border="false"
22    legend-position="bottom"
23    height="h-72"
24    :chart-color="['teal', 'orange']"
25/>

Three-Way Comparison

Compare three or more datasets simultaneously with automatic color assignment and adjustable opacity.

Candidate Comparison

Candidate A Experience: 90 90 Skills: 85 85 Communication: 88 88 Cultural Fit: 92 92 Motivation: 95 95 Candidate B Experience: 75 75 Skills: 95 95 Communication: 90 90 Cultural Fit: 85 85 Motivation: 88 88 Candidate C Experience: 82 82 Skills: 80 80 Communication: 95 95 Cultural Fit: 90 90 Motivation: 85 85 Experience Skills Communication Cultural Fit Motivation
Candidate A
Experience 90
Skills 85
Communication 88
Cultural Fit 92
Motivation 95
Candidate B
Experience 75
Skills 95
Communication 90
Cultural Fit 85
Motivation 88
Candidate C
Experience 82
Skills 80
Communication 95
Cultural Fit 90
Motivation 85 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Candidate A',
 5            'Experience' => 90,
 6            'Skills' => 85,
 7            'Communication' => 88,
 8            'Cultural Fit' => 92,
 9            'Motivation' => 95,
10        ],
11        [
12            'label' => 'Candidate B',
13            'Experience' => 75,
14            'Skills' => 95,
15            'Communication' => 90,
16            'Cultural Fit' => 85,
17            'Motivation' => 88,
18        ],
19        [
20            'label' => 'Candidate C',
21            'Experience' => 82,
22            'Skills' => 80,
23            'Communication' => 95,
24            'Cultural Fit' => 90,
25            'Motivation' => 85,
26        ],
27    ]"
28    title="Candidate Comparison"
29    :chart-color="['blue', 'green', 'purple']"
30    legend-position="right"
31    :fill-opacity="0.15"
32/>

Collapsible Radar Chart

Make the chart collapsible by enabling the collapsible prop. Click the title to expand/collapse.

Competitive Analysis

Product A Speed: 85 85 Quality: 90 90 Price: 60 60 Design: 75 75 Support: 80 80 Product B Speed: 70 70 Quality: 85 85 Price: 90 90 Design: 65 65 Support: 70 70 Speed Quality Price Design Support
Product A
Speed 85
Quality 90
Price 60
Design 75
Support 80
Product B
Speed 70
Quality 85
Price 90
Design 65
Support 70 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Product A',
 5            'Speed' => 85,
 6            'Quality' => 90,
 7            'Price' => 60,
 8            'Design' => 75,
 9            'Support' => 80,
10        ],
11        [
12            'label' => 'Product B',
13            'Speed' => 70,
14            'Quality' => 85,
15            'Price' => 90,
16            'Design' => 65,
17            'Support' => 70,
18        ],
19    ]"
20    title="Competitive Analysis"
21    :collapsible="true"
22    legend-position="bottom"
23    height="h-80"
24/>

Props

Prop Type Default Description
data
array []
Array of datasets. Each dataset is an array with 'label', optional 'color', and metric key-value pairs.
height
string 'h-96'
Tailwind height class for the chart container.
chartColor
mixed null
Color(s) for datasets. Can be a single color or array of colors.
backgroundColor
string|null null
Background color for the chart wrapper.
title
string|null null
Chart title displayed at the top.
collapsible
bool false
Whether the chart can be collapsed/expanded from the title.
showLabels
bool true
Whether to show axis labels for each metric.
legendPosition
string 'bottom'
Position of the legend: 'right', 'bottom', 'none', or 'hidden'.
formatValues
string '%s'
Printf-style format string for value display.
border
bool true
Whether to show border around the chart.
borderColor
string|null null
Custom border color (Tailwind class).
showGrid
bool true
Whether to show grid circles.
gridLevels
int 5
Number of concentric grid circles to display.
showAxes
bool true
Whether to show radial axes lines from center to each vertex.
fillArea
bool true
Whether to fill the polygon area formed by the data points.
fillOpacity
float 0.2
Opacity of the filled area (0-1).
Beartropy Logo

© 2026 Beartropy. All rights reserved.

Provided as-is, without warranty. Use at your own risk.