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 Copy Link

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 Copy Link

Axis Shape Copy Link

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 Copy Link

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 Copy Link

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 Copy Link