Introduction to Radar Chart

Radar chart, also known as spider chart or web chart, is traditionally considered a chart for displaying multi-dimensional (4+ dimensions) data. It maps multiple dimensions of data onto coordinate axes that start from the same center point and typically end at the circumference. Connecting points of the same group with lines forms the radar chart. While it can display multi-dimensional data, the relative positions of points and angles between axes carry no informational value. With proper axis settings, the area enclosed by the radar chart can convey some information.

Each dimension's data corresponds to a coordinate axis. These axes share the same center point, are equally spaced radially, and have identical scales. Grid lines connecting the axes serve mainly as auxiliary elements. Connecting data points on each axis forms a polygon. The combination of axes, points, lines, and polygons constitutes a radar chart.

It's important to emphasize that although each axis represents a different dimension, for easier understanding and uniform comparison, radar charts often artificially unify all axes to a single metric (e.g., scores or percentages). This effectively reduces the chart to two dimensions, and this simplified version is more commonly used in daily life. Additionally, radar charts can effectively display the relative weights of variables in a dataset, making them particularly suitable for performance data visualization.

Main disadvantages of radar charts:

1. Too many polygons can reduce readability and make the chart overly cluttered, especially when polygons are color-filled and overlap.

2. Too many variables can also decrease readability since each variable requires its own axis, making the chart appear complex. Best practice is to limit the number of variables to keep the radar chart simple and clear.

Notes:

1. For simplicity and alignment with current usage, we'll focus on the simplified two-dimensional version.
2. Radar charts are best for comparing similar charts (radar-to-radar comparisons).

Other Names: Spider Chart, Web Chart, Polar Chart, Star Plots

Composition of Radar Charts

Single-Series Radar Chart

Multi-Series Radar Chart

Use Cases of Radar Chart

Suitable Use Cases

Example 1: Multi-dimensional Data Comparison

Below is a radar chart evaluating personal comprehensive abilities.

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

chart.options({
  type: 'area',
  coordinate: {
    type: 'polar',
  },
  autoFit: true,
  data: [
    { ability: 'Language', score: 8.8 },
    { ability: 'Logic', score: 9.0 },
    { ability: 'Affinity', score: 7.2 },
    { ability: 'Sports', score: 4.5 },
    { ability: 'Learning', score: 8.3 },
  ],
  encode: { x: 'ability', y: 'score' },
  scale: {
    x: { padding: 0.5, align: 0 },
    y: {
      domainMin: 0,
      domainMax: 10,
      tickCount: 5,
      label: false,
    },
  },
  style: {
    fillOpacity: 0.5,
    lineWidth: 2,
  },
  axis: {
    x: { grid: true },
    y: { tick: false, grid: true, title: false, zIndex: 1 },
  },
  interaction: {
    tooltip: { crosshairsLineDash: [4, 4] },
  },
});

chart.render();

Explanation:

• ability field maps to angular position in polar coordinates
• score field maps to radial length

Example 2: Performance Comparison Across Multiple Dimensions

This radar chart compares Huawei Mate and ZTE Grand Memo smartphones across five dimensions (sample data).

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

chart.options({
  type: 'line',
  coordinate: {
    type: 'polar',
  },
  autoFit: true,
  data: [
    { performance: 'Usability', type: 'Huawei Mate', score: 80 },
    { performance: 'Features', type: 'Huawei Mate', score: 90 },
    { performance: 'Camera', type: 'Huawei Mate', score: 80 },
    { performance: 'Benchmark', type: 'Huawei Mate', score: 70 },
    { performance: 'Battery', type: 'Huawei Mate', score: 90 },
    { performance: 'Usability', type: 'ZTE Grand Memo', score: 70 },
    { performance: 'Features', type: 'ZTE Grand Memo', score: 82 },
    { performance: 'Camera', type: 'ZTE Grand Memo', score: 81 },
    { performance: 'Benchmark', type: 'ZTE Grand Memo', score: 82 },
    { performance: 'Battery', type: 'ZTE Grand Memo', score: 78 },
  ],
  encode: { x: 'performance', y: 'score', color: 'type' },
  scale: {
    x: { padding: 0.5, align: 0 },
    y: {
      domainMin: 0,
      domainMax: 100,
      tickCount: 5,
      label: false,
    },
  },
  style: {
    fillOpacity: 0.5,
    lineWidth: 2,
  },
  axis: {
    x: { grid: true, tick: false, gridLineDash: [0, 0] },
    y: {
      tick: false,
      grid: true,
      title: false,
      zIndex: 1,
      gridLineDash: [0, 0],
      gridAreaFill: (dataum, index, data) => {
        return index % 2 === 1 ? 'rgba(0, 0, 0, 0.04)' : '';
      },
    },
  },
  interaction: {
    tooltip: { crosshairsLineDash: [4, 4] },
  },
});

chart.render();

Explanation:

• performance maps to angular position
• type maps to color differentiation
• score maps to radial length

Comparing Radar Chart to Other Charts

Radar Chart and Pie Chart

• Radar charts compare data (size/values) across multiple dimensions
• Pie charts show proportions between categories

Radar Chart and Rose Chart

• Rose charts compare data through distribution angles, lengths, and color density, showing parts-to-whole relationships
• Radar charts compare data through edge/arc length from center, suitable for comparing categories across multiple dimensions

Similar Charts

Categories