AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Radar Chart

Overview

A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes is typically uninformative.

The radar chart is otherwise known as a web chart, spider chart, star chart, cobweb chart, star plot, irregular polygon, or kiviat diagram.

This article explains how to create and configure radar charts. To find out which series can be drawn on a radar chart in AnyChart, see the Supported Types section.

Modules

Radar charts require adding the Core and Radar modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-radar.min.js"></script>

Learn more: Modules.

Quick Start

To create a radar chart, use the anychart.radar() chart constructor.

AnyChart allows you to display three types of series on radar charts: Line, Area and Marker. If you just pass your data to the chart constructor, a Line series is created. You can also set the type of a series explicitly by calling one of the following methods:

In the sample below, there is a radar chart with two series, Line and Area:

// create data for the first series
var data_1 = [
  {x: "A", value: 1222},
  {x: "B", value: 2431},
  {x: "C", value: 3624},
  {x: "D", value: 5243},
  {x: "E", value: 6813},
  {x: "F", value: 5321},
  {x: "G", value: 1567},
  {x: "H", value: 3876}
];

// create data for the second series
var data_2 = [
  {x: "A", value: 722},
  {x: "B", value: 1431},
  {x: "C", value: 1624},
  {x: "D", value: 1243},
  {x: "E", value: 1813},
  {x: "F", value: 1321},
  {x: "G", value: 567},
  {x: "H", value: 1876}
];

// create a chart
chart = anychart.radar();

// create the first series (line) and set the data
var series1 = chart.line(data_1);

// create the second series (area) and set the data
var series2 = chart.area(data_2);

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

Playground

Start Angle

You can set the start angle of a radar chart by using the startAngle() method. The angle is 0° by default.

In the sample below, the start angle of the first chart is not configured, and for the second chart it is set to 90°:

// set the start angle
radar2.startAngle(90);

Playground

Axes and Scales

In this section you can find some settings of axes and scales that are often used with radar charts. To learn about all the available settings, see Axes and Grids.

If you want to configure the stroke of the X- and Y-axes of your radar chart, use the stroke() method:

// configure the appearance of the y-axis
chart.yAxis().stroke({
  color: "gray",
  thickness: 2,
  dash: "10 5"
});  

// configure the appearance of the X-axis
chart.xAxis().stroke({
  color: "#00cc99",
  thickness: 4,
});

To invert a scale, call the inverted() method:

// invert the y-scale
chart.yScale().inverted(true);

You might also want to create a logarithmic scale. Use log() for creating it and yScale() for setting it as the Y-scale of your chart:

// create a logarithmic scale
var logScale = anychart.scales.log();

// set the minimum and maximum values of the scale
logScale.minimum(10);
logScale.maximum(10000); 

// set the logarithmic scale as the y-scale
chart.yScale(logScale);

The following sample shows how to configure the appearance of the X- and Y-axes and invert the Y-scale:

Playground

Grids

This section explains how to configure the appearance and layout of grids on radar charts. You can also read about grids here: Axis Basics: Grids.

By default, there are two grids: yGrid() and xGrid()

You can configure the appearance of any grid - here is the list of available methods:

  • stroke() sets the stroke
  • palette() sets the fills to create solid or interlaced effects.

Stroke

In the sample below, there is a radar chart with the stroke of both grids configured:

// configure the stroke of the x-grid
chart.xGrid().stroke({
  color: "green",
  thickness: 0.5,
  opacity: 0.5
});

// configure the stroke of the circular grid
chart.yGrid().stroke({
  color: "green",
  thickness: 0.5,
  opacity: 0.5,
  dash: "10 5"
});

Playground

Cell Color

In this sample cells of the radial and circular grids are filled with color:

// color the even-odd cells of the x-grid
radar1.xGrid().palette(["gray 0.05", "gray 0.1"]);

// color the even-odd cells of the y-grid 
radar2.yGrid().palette(["gray 0.05", "gray 0.1"]);

Playground

Stacked Radar Charts

Stacked and percent stacked charts are multiple-series charts where related values are placed atop one another, which allows comparing the the contribution of a value to a total, either in absolute or percentage terms.

You can create stacked radar charts by enabling a special mode of the scale that makes series stack together. Read more: Stacked Charts.

Supported Types

Here is the list of supported radar charts:

See also stacked charts: