Radar Chart

• Overview
• Chart Building
• Radar plot configuration
  • Radius size
  • Start angle
  • Using polar coordinates
  • Draw grid lines as circles
  • Background settings
  • Border settings
  • Axes under data
  • Closed and open contour
• X-Axis settings
  • X axis enable/disable
  • Tickmarks
  • Grids
  • Labels settings
    • Rotation settings
    • Position and padding
    • Background settings
    • Formatting settings
• Y-Axis settings
  • Y axis enable/disable
  • Linear and Logarithmic scale
  • Scale modes
    • Stacked scale mode
    • PercentStacked scale mode
  • Tickmarks
  • Grids
  • Labels settings
  • Rotation settings
  • Position and paddings
  • Background settings
  • Formatting settings
  • Hide first and last labels
• Working with data labels and tooltips
• Supported series types
• Missing points

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 also known as web chart, spider chart, star chart, cobweb chart, star plot, irregular polygon, polar chart, or kiviat diagram.

Chart Building

AnyChart allows to display three types of series on Radar chart: Line, Area and Marker. You need to set plot_type="Radar" in<chart> to display Radar chart:

As you can see each point is represented by category set using name attribute and value set using y attribute.

Here is a basic Radar sample:

Radar plot configuration

Radar plot has several distinctive configuration options, which are presented in this section: chart radius settings, chart rotation and background settings.

Radius size

Radar plot radius can be set absolute or relative. To use absolute settings you need to set fixed_radius="true" in <radar> node, and set radius in pixels, for example: radius="120"

Here is a sample of the radar chart with fixed radius:

You can also set radius in percents, relative to chart height and width, to do so you have to set, for example: radius="50%"

Sample chart with radius set to 85%:

Start angle

By default radar starts drawing from the top center point (0°), but you can change this using start_angle attribute in <radar> node:

Sample chart with starting angle shifted to 90°:

Using polar coordinates

Radar chart supports polar coordinates, which allow you to join lines using arcs, to enable this mode set use_polar_coords="true":

Here is a sample chart where points are joined with arcs:

Note: if you need Polar Chart, refer to Polar Chart article.

Draw grid lines as circles

Grid lines can be drawn both as "spider web" or circles, to draw them as circles set drawing_style="Circle" (the default is "Polygon"):

Note: even if the grid of is disabled - axis itself is drawn as circle.

Here is a sample chart with grid displayed as circles:

Plot background

You can change radar background using <background> node, learn more about this node at Background settings tutorial.

Sample radar chart with tuned background:

Border settings

Radar border consists of two different lines: <border> of <background> node described above, and X-axis setting - <line> node:

Sample below shows Х-axis line width and background border are set to 4 pixels:

Data under axes

Another special feature of Radar chart is an ability to set whether data series are displayed under or above axes lines. This is set using display_data_mode attribute, which can be either "AboveAxes" (default) or "UnderAxes".

Sample chart with data series displayed under axes lines:

Closed and open contour

By default all series are close - the last point is joined with the first one. You can disjoin any series by setting close_contour attribute of <series> node to false:

Sample chart with disjointed line:

X axis settings

This section tells how to configure Х axis and its elements, such as tick marks, grid and labels.

X axis enable/disable

To turn X axis on or off use enabled attribute of <x_axis> node - setting it to false hides all visible components of X axis:

Sample chart with X-axis turned off:

Note: You see the chart outline - it comes from background.

Tickmarks

Tickmarks are the small marks used to represent a point on an axis scale, used to indicate major step of an axis scale. You can control their appearance and position. To enable/disable tickmarks set enabled="true" or enabled = "False" to <major_tickmark>

Tickmarks can be placed "inside" and "outside" relatively to axis line. These features are controlled by inside and outside attributes.

Warning: X axis in Radar plot doesn't support minor grids and tickmarks. Only major.

Grids

Each axis has its own grid. By default grid is enabled for all axes and looks like a set of black lines. You can turn it off or configure to fit your needs. Here is a sample XML with grid settings:

In <line> node you can change:

Attribute	Description
color	Sets line color.
opacity	Sets line opacity.
thickness	Sets line thickness.

In <interlaced_fills> node you can set <even> and <odd> fills, fills start from axis and the first section is "even".

Warning: X axis in Radar plot doesn't support minor grids and tickmarks. Only major.

Labels settings

You can change format, rotation, placement, paddings and visual settings of axis labels, this section covers all basic available options.

Rotation settings

Using circular_labels_style attribute you can change the way labels are placed near the circular axis of radar chart: the placement options are: "Horizontal", "Circular" or "Radial".

By default Horizontal is set, but you can always change it:

Horizontal labels sample:

Setting Circular mode sample:

And the chart with with such settings:

Setting Radial mode:

And the chart with radially placed labels:

Position and padding

Labels can be Inside or Outside of the axis and this is configured using position attribute, which is set to Outside by default.

You can also set the padding between the axis and labels (in pixels):

Sample with padding set to 10 and labels placed inside:

Background settings

You can change labels background. Learn more about background configuration in Background settings tutorial.

Sample with labels with tuned background:

Formatting settings

In labels format you can access only %Value token, which can be formatted according to the Axis Labels Formatting rules:

In the sample below all names are limited to the length of 3:

Y axis settings

This section tells how to configure Y axis mode, scale and its elements, such as tick marks, grid and labels.

Y axis enable/disable

To turn Y axis on or off use enabled attribute of <y_axis> node - setting it to false hides all visible components of Y axis:

Sample with Y axis turned off:

Linear and Logarithmic scale

Radar chart supports to scale types: linear and logarithmic. This is controlled using type attribute of <scale> node :

Sample radar chart with logarithmic axis:

Scale modes

Radar chart Y axis supports three modes: Normal, Stacked and PercentStacked.

Stacked scale mode

Stacked scale mode stacks all y vales within each category, set this mode via mode attribute of <scale> node:

Sample stacked radar chart:

Note: different series types do not stack (i.e. Line do not stack with Area).

PercentStacked scale mode

Percent stacked mode calculates the proportion of each point to the category sum and uses this percentage as a value. This mode is also set using mode attribute of <scale> node:

Sample Radar chart with PercentStacked axis scale mode:

Note: different series types do not stack (i.e. Line do not stack with Area).

Tickmarks

Tickmarks are the small marks used to represent a point on an axis scale, used to indicate major step of an axis scale. You can control their appearance and position. To enable/disable tickmarks set enabled="True" or enabled = "False" to <major_tickmark>

Tickmarks can be placed "inside" and "outside" relatively to axis line. These features are controlled by inside and outside attributes.

Warning: Y axis in radar plot doesn't support minor grids and tickmarks. Only major.

Grids

Each axis has its own grid. By default grid is enabled for all axes and looks like a set of black lines. You can turn it off or configure to fit your needs. Here is a sample XML with grid settings:

Attributes of <line>:

Attribute	Description
color	Sets line color.
opacity	Sets line opacity.
thickness	Sets line thickness.

In <interlaced_fills> node you can set <even> and <odd> fills, fills start from axis and the first section is "even".

Warning: Y axis in radar plot doesn't support minor grids and tickmarks. Only major.

Labels settings

You can tune Y axis labels format, position, rotation, padding and change visual settings.

Rotation

To rotate the labels you should set rotation angle in rotation attribute:

Sample Radar chart with rotated labels:

Position and padding

Labels can be Inside or Outside of the axis and this is configured using position attribute, which is set to Outside by default.

You can also set the padding between the axis and labels (in pixels):

Sample with padding set to 10 and labels placed inside:

Background settings

You can change labels background. Learn more about background configuration in Background settings tutorial.

Sample with labels with tuned background:

Formatting settings

In Y axes labels you can use only %Value token, which can be formatted as described at Axis Labels Formatting.

Sample with formatted labels:

Hide first and last labels

You can hide first and/or last labels using show_first_label and show_last_label attributes:

Sample chart with first label hidden:

Working with data labels and tooltips

In this section we will explain how to add and configure data labels and tooltips. Full explanation of formatting and tuning visual appearance for them can be found in Labels and tooltips.

If you want to configure data labels and tooltips for all series - you should do that in <label> and <tooltip> sub-nodes of <radar> node. You can tune their visual appearance, positioning and format. Let's do that in the following example: we will make data labels appear to the top of the data points, also, we will format labels so they show only the value corresponding to the point and tooltip will show detailed description.

When formatting data labels text and tooltip we will use formatting keywords:
{%Name} - to show month name,
{%YValue} - to show sales for this month,
{%SeriesName} - to show period (Year),
{%YPercentOfSeries} - to show every month percentage to total sales per year.

Supported series types

Radar chart supports: Line, Area and Marker series types. You can learn how to change and configure styles of these types at: Area styles, Line styles and Marker styles.

Missing points

Radar chart supports missing control: missing and non-numeric y are ignored: