Vue 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".

Customisation

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