Chart.js Radar Chart — Multi-Dimensional Data Display
In this tutorial, you will learn about Chart.js Radar Chart. We cover key concepts, practical examples, and best practices to help you master this topic.
Chart.js radar charts display multi-dimensional data on circular axes, making it easy to compare subjects across several metrics at once.
What You'll Learn
By the end of this guide, you will create radar charts with multiple datasets, configure point and line styles, customize scale options, and build a skill comparison visualization.
Basic Radar Chart
new Chart(document.getElementById('radar'), {
type: 'radar',
data: {
labels: ['Speed', 'Strength', 'Agility', 'Endurance', 'Accuracy'],
datasets: [{
label: 'Player A',
data: [85, 70, 90, 60, 80],
borderColor: '#4ecdc4',
backgroundColor: 'rgba(78, 205, 196, 0.2)'
}]
},
options: {
responsive: true,
scales: {
r: {
beginAtZero: true,
max: 100
}
}
}
});
Multiple Datasets
datasets: [
{
label: 'Player A',
data: [85, 70, 90, 60, 80],
borderColor: '#4ecdc4',
backgroundColor: 'rgba(78, 205, 196, 0.2)'
},
{
label: 'Player B',
data: [75, 85, 65, 80, 70],
borderColor: '#ff6b35',
backgroundColor: 'rgba(255, 107, 53, 0.2)'
}
]
Custom Scale Options
options: {
scales: {
r: {
beginAtZero: true,
max: 100,
ticks: {
stepSize: 20,
backdropColor: 'transparent'
},
pointLabels: {
font: { size: 12, weight: 'bold' }
}
}
}
}
Common Mistakes
1. Too Many Axes
Radar charts with more than 8 axes become cluttered. Group related metrics or use multiple charts.
2. Not Starting at Zero
beginAtZero: false can misrepresent the shape. Always start at zero for fair comparison.
3. Overlapping Labels
Long axis labels overlap. Use short labels or rotate pointLabels with angleLines.
4. Transparent Fill Hiding Lines
High fill opacity hides grid lines. Use fill opacity between 0.1 and 0.3.
5. Inconsistent Data Ranges
One dataset with value 0-100 and another with 0-10 will visually compress the smaller set. Normalize data before display.
Practice Questions
Q1: What is the scale key for radar charts?
A: scales.r — the radial scale for the circular axis.
Q2: How do you fill the area inside the radar polygon? A: Set backgroundColor on the dataset with an rgba value.
Q3: How many datasets can a radar chart show? A: 3-5 datasets is recommended. More becomes difficult to read.
Q4: What does pointRadius control? A: The size of data point markers on each axis.
Q5: How do you hide grid lines?
A: Set scales.r.grid.display: false.
Challenge: Build a team skill radar comparing 3 team members across 6 skills. Add a toggle to show/hide each member.
FAQ
Try It Yourself
Build a radar chart comparing two products across 5 attributes.
<!DOCTYPE html>
<html>
<head>
<title>Radar Chart Demo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Product Comparison</h2>
<canvas id="radar" width="400" height="400"></canvas>
<script>
new Chart(document.getElementById('radar'), {
type: 'radar',
data: {
labels: ['Quality', 'Price', 'Features', 'Support', 'Design'],
datasets: [
{
label: 'Product X',
data: [90, 60, 85, 70, 95],
borderColor: '#4ecdc4',
backgroundColor: 'rgba(78,205,196,0.2)',
pointBackgroundColor: '#4ecdc4'
},
{
label: 'Product Y',
data: [70, 90, 60, 85, 75],
borderColor: '#ff6b35',
backgroundColor: 'rgba(255,107,53,0.2)',
pointBackgroundColor: '#ff6b35'
}
]
},
options: {
responsive: true,
scales: { r: { beginAtZero: true, max: 100 } },
plugins: {
tooltip: { enabled: true }
}
}
});
</script>
</body>
</html>
What's Next
Create polar area charts.
Polar Area — Polar area charts. Mixed Charts — Combining chart types.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro