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:
angleKeyis set to 'department', which is the shared category for the Angle Axis.radiusKeyspecifies the numerical datasets, 'quality' and 'efficiency', for the Radius Axis.radiusNamelabels 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
Properties available on the AgRadarLineSeriesOptions interface.
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Configuration for marker and series highlighting when a series or legend item is hovered over.
A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
Properties available on the AgAngleCategoryAxisOptions interface.
This property is for grouped polar series plotted on a angle category axis.
It is a proportion between 0 and 1 which determines the size of the gap between the items within a single group along the angle axis.
This property is for grouped polar series plotted on a angle category axis.
It is a proportion between 0 and 1 which determines the size of the gap between the groups of items along the angle axis.
Properties available on the AgRadiusNumberAxisOptions interface.
The ratio of the inner radius of the axis as a proportion of the overall radius.
Used to create an inner circle.