Vue ChartsRadar Line Series

A Radar Line Series, often called a Spider Line, is typically used to contrast different datasets across shared categories for easy visual comparison.

Simple Radar Line

To create a Radar Line Series, use the radar-line series type.

series: [
    { type: 'radar-line', angleKey: 'department', radiusKey: 'quality', radiusName: `Quality` },
    { type: 'radar-line', 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.

The following configuration uses the circle shape on both axes:

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