<!DOCTYPE html>
<html>
<head>
<title>Radar Chart with
Circular Grid Lines</title>
<script src=
</script>
</head>
<body>
<div style="width: 80%; margin: auto;">
<canvas id="myRadarChart"></canvas>
</div>
<script>
// Sample data for the radar chart
const data = {
labels: ['Sales', 'Marketing',
'Development', 'Design', 'Support'],
datasets: [{
label: 'Team Skills',
data: [80, 70, 90, 60, 75],
// Area fill color
backgroundColor: 'rgba(75, 192, 192, 0.7)',
// Border color
borderColor: 'rgba(75, 192, 192, 1)',
// Border width
borderWidth: 2,
}]
};
// Get the canvas element
const ctx = document.getElementById('myRadarChart')
.getContext('2d');
// Create the radar chart
// with circular grid lines
const chart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
scales: {
r: {
grid: {
// Set grid lines to be circular
circular: true,
// Set grid line color
color: 'rgba(0, 0, 255, 0.2)',
// Show grid lines
display: true,
// Do not draw lines beside the ticks
drawTicks: false,
// Set grid line width
lineWidth: 2,
// Set grid line length
// into the axis area
tickLength: 10,
}
}
},
elements: {
line: {
// Line curve tension
tension: 0.4,
}
},
plugins: {
legend: {
// Show legend
display: true,
// Legend position
position: 'top',
}
}
}
});
</script>
</body>
</html>