JavaScript ChartsRadar Area Series

Version 14.2.0

Enterprise

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

main.ts

import {
  AgChartOptions,
  AgCharts,
  AngleCategoryAxisModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  RadarAreaSeriesModule,
  AngleCategoryAxisModule,
  RadiusNumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "KPIs by Department",
  },
  series: [
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "quality",
      radiusName: "Quality",
    },
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "efficiency",
      radiusName: "Efficiency",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export function getData() {
  return [
    {
      department: "Sales",
      quality: 40,
      efficiency: 75,
    },
    {
      department: "Engineering",
      quality: 45,
      efficiency: 90,
    },
    {
      department: "HR",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Marketing",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Finance",
      quality: 85,
      efficiency: 50,
    },
  ];
}

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

main.ts

import {
  AgCharts,
  AgPolarChartOptions,
  AngleCategoryAxisModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AngleCategoryAxisModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
  ContextMenuModule,
]);

const options: AgPolarChartOptions = {
  data: getData(),
  title: {
    text: "KPIs by Department",
  },
  series: [
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "quality",
      radiusName: "Quality",
    },
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "efficiency",
      radiusName: "Efficiency",
    },
  ],
  axes: {
    angle: {
      type: "angle-category",
      shape: "circle",
    },
    radius: {
      type: "radius-number",
      shape: "circle",
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export function getData() {
  return [
    {
      department: "Sales",
      quality: 40,
      efficiency: 75,
    },
    {
      department: "Engineering",
      quality: 45,
      efficiency: 90,
    },
    {
      department: "HR",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Marketing",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Finance",
      quality: 85,
      efficiency: 50,
    },
  ];
}

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: {
        angle: { type: 'angle-category', shape: 'circle' },
        radius: { type: 'radius-number', shape: 'circle' },
    },
}

Axis Label Orientation Copy Link

main.ts

import {
  AgCharts,
  AgPolarChartOptions,
  AngleCategoryAxisModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AngleCategoryAxisModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
  ContextMenuModule,
]);

const options: AgPolarChartOptions = {
  data: getData(),
  title: {
    text: "KPIs by Department",
  },
  series: [
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "quality",
      radiusName: "Quality",
    },
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "efficiency",
      radiusName: "Efficiency",
    },
  ],
  axes: {
    angle: {
      type: "angle-category",
      label: {
        orientation: "parallel",
      },
    },
    radius: {
      type: "radius-number",
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export function getData() {
  return [
    {
      department: "Sales",
      quality: 40,
      efficiency: 75,
    },
    {
      department: "Engineering",
      quality: 45,
      efficiency: 90,
    },
    {
      department: "HR",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Marketing",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Finance",
      quality: 85,
      efficiency: 50,
    },
  ];
}

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: {
        angle: {
            type: 'angle-category',
            label: {
                orientation: 'parallel',
            },
        },
        radius: { type: 'radius-number' },
    },
}

Radius Axis Position Copy Link

main.ts

import {
  AgChartOptions,
  AgCharts,
  AngleCategoryAxisModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AngleCategoryAxisModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  RadarAreaSeriesModule,
  RadiusNumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "KPIs by Department",
  },
  series: [
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "quality",
      radiusName: "Quality",
    },
    {
      type: "radar-area",
      angleKey: "department",
      radiusKey: "efficiency",
      radiusName: "Efficiency",
    },
  ],
  axes: {
    angle: {
      type: "angle-category",
    },
    radius: {
      type: "radius-number",
      positionAngle: 72,
      label: {
        rotation: -72,
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export function getData() {
  return [
    {
      department: "Sales",
      quality: 40,
      efficiency: 75,
    },
    {
      department: "Engineering",
      quality: 45,
      efficiency: 90,
    },
    {
      department: "HR",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Marketing",
      quality: 80,
      efficiency: 60,
    },
    {
      department: "Finance",
      quality: 85,
      efficiency: 50,
    },
  ];
}

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

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

Radar Area Chart Examples Copy Link

See more Radar Area Chart examples in the AG Charts Gallery.

Radar Area Chart Example

Radar Area Chart With Labels Example

Reversed Radar Area Chart Example

API Reference Copy Link

Properties available on the AgRadarAreaSeriesOptions interface.

type required 'radar-area': Configuration for the Radar Area Series.
angleKey required DatumKey: The key to use to retrieve angle values from the data.
radiusKey required DatumKey: The key to use to retrieve radius values from the data.
highlight AgMultiSeriesHighlightOptions: Configuration for highlighting when a series or legend item is hovered over.
styler Styler: Function used to return formatting for entire series, based on the given parameters.
fill AgColorType: The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity: The opacity of the fill colour.
marker AgSeriesMarkerOptions: Configuration for the markers used in the series.
label AgChartLabelOptions: Configuration for the labels shown on top of data points.
tooltip AgSeriesTooltip: Series-specific tooltip configuration.
connectMissingData boolean: Set to `true` to connect across missing data points.
stroke AgCssColorOrRef: The colour for the stroke.
strokeWidth PixelSize: The width of the stroke in pixels.
strokeOpacity Opacity: The opacity of the stroke colour.
lineDash PixelSize[]: An array specifying the length in pixels of alternating dashes and gaps.
lineDashOffset PixelSize: The initial offset of the dashed line in pixels.
cursor string: The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
context ContextDefault: Context object to use in callbacks.
selection AgSelectionOptions: Configuration for data selection.
nodeClickRange InteractionRange: Range from a node that a click triggers the listener.
showInLegend boolean: Whether to include the series in the legend.
listeners AgSeriesListeners: A map of event names to event listeners.
id string default: auto-generated value: 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.
data DatumDefault[]: The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean: Whether to display the series.
angleName string: A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
radiusName string: A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
legendItemName string: The text to display in the legend for this series. If supplied, matching items with the same value will be toggled together.

Properties available on the AgAngleCategoryAxisOptions interface.

type 'angle-category': Axis type identifier.
shape AgPolarAxisShape: Shape of axis. Default: `polygon`
startAngle Degree: Angle in degrees to start ticks positioning from.
endAngle Degree: Angle in degrees to end ticks positioning at.
crossLines AgAngleCrossLineOptions[]: Add cross lines or regions corresponding to data values.
groupPaddingInner Ratio: 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.
paddingInner Ratio: 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.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgAngleAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.
interval AgAxisBaseIntervalOptions: Configuration for the axis ticks interval.

Properties available on the AgRadiusNumberAxisOptions interface.

type 'radius-number': Axis type identifier.
positionAngle Degree: The rotation angle of axis line and labels in degrees.
shape AgPolarAxisShape: Shape of axis. Default: `polygon`
title AgAxisCaptionOptions: Configuration for the title shown next to the axis.
crossLines AgRadiusCrossLineOptions[]: Add cross lines or regions corresponding to data values.
innerRadiusRatio Ratio: The ratio of the inner radius of the axis as a proportion of the overall radius. Used to create an inner circle.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgRadiusAxisFormattableLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.
nice boolean: If `true`, the range will be rounded up to ensure nice equal spacing between the ticks. __Note:__ This does not override the `min` or `max` options.
interval AgAxisContinuousIntervalOptions: Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval.
min AgNumericValue: The min value for the axis domain.
max AgNumericValue: The max value for the axis domain.
preferredMin AgNumericValue: The min value for the axis, unless extended by the series data or `nice` option.
preferredMax AgNumericValue: The max value for the axis, unless extended by the series data or `nice` option.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

JavaScript ChartsRadar Area Series

Simple Radar Area Copy Link

Customisation Copy Link

Axis Shape Copy Link

Axis Label Orientation Copy Link

Radius Axis Position Copy Link

Radar Area Chart Examples Copy Link

API Reference Copy Link