Radar Chart

Code

const ctx = document.getElementById('radarChart').getContext('2d');
new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['Speed', 'Strength', 'Skill', 'Stamina', 'Agility', 'Intellect'],
    datasets: [
      {
        label: 'Player A',
        data: [80, 70, 90, 60, 75, 85],
        borderColor: 'rgba(255, 99, 132, 1)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        pointBackgroundColor: 'rgba(255, 99, 132, 1)'
      },
      {
        label: 'Player B',
        data: [60, 90, 65, 80, 70, 60],
        borderColor: 'rgba(54, 162, 235, 1)',
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        pointBackgroundColor: 'rgba(54, 162, 235, 1)'
      }
    ]
  },
  options: {
    scales: {
      r: { beginAtZero: true, max: 100, ticks: { stepSize: 20 } }
    }
  }
});

Explanation

Plots multivariate data on radial axes; each label becomes a spoke and each dataset fills a polygon. The r scale configures the radial axis (beginAtZero, max, ticks) and overlapping translucent fills make multi-series comparison easy. Radar charts excel at showing profiles or skill distributions across balanced dimensions.

More Chart.js Snippets