React ChartsRadar Area Series


A Radar Area Series, also called a Spider Area, shows the magnitude of various datasets within shared categories, making it easier to gauge area-based trends.

Simple Radar Area

To create a Radar Area Series, use the radar-area series type.

series: [
    { type: 'radar-area', angleKey: 'department', radiusKey: 'quality', radiusName: `Quality` },
    { type: 'radar-area', , angleKey: 'department', radiusKey: 'efficiency', radiusName: `Efficiency` },

In this configuration:

  • angleKey is set to 'department', which is the shared category for the Angle Axis.
  • radiusKey specifies the numerical datasets, 'quality' and 'efficiency', for the Radius Axis.
  • radiusName labels each series, such as "Quality" and "Efficiency".


Axis Shape

For Polar Axes, there are two shape options:

  • polygon: Connected with straight lines (default).
  • circle: Composed of concentric circles.

To switch to the circle shape, use the following axes configuration:

axes: [
    { type: 'angle-category', shape: 'circle' },
    { type: 'radius-number', shape: 'circle' },

Axis Label Orientation

To change Angle Axis Label orientation, use the label.orientation property with these options:

  • fixed: Labels have fixed orientation (default).
  • parallel: Labels align parallel to the axis.
  • perpendicular: Labels align perpendicular to the axis.

The following configuration changes the orientation of the Axis Labels to parallel :

axes: [
        type: 'angle-category',
        label: {
            orientation: 'parallel',
    { type: 'radius-number' },

Radius Axis Position

Customise the Radius Axis Line position via positionAngle and Axis Label rotation using label.rotation:

axes: [
    { type: 'angle-category' },
        type: 'radius-number',
        positionAngle: 72,
        label: {
            rotation: -72,

API Reference