Polar Chart

• Overview
• Chart Building
• Polar plot configuration
  • Radius size
  • Start angle
  • 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 settings
    • Background settings
    • Formatting settings
    • Hide first and last labels
• Y-Axis settings
  • Y axis enable/disable
  • Linear & Logarithmic scale types
  • Tickmarks
  • Grids
  • Labels settings
  • Rotation settings
  • Position & Padding settings
  • Background settings
  • Formatting settings
  • Hide first and last labels
• Working with data labels and tooltips
• Supported series types
• Missing points

Overview

Polar chart plot allows to draw scatter chart using polar coordinate system, which is is a two-dimensional coordinate system in which each point on a plane is determined by a distance from a fixed point and an angle from a fixed direction.

Chart Building

AnyChart allows to draw Line, Area and Marker series on Polar plot. To enable polar plot set plot_type="Polar":

As you can see each point should have x и y attributes set, they define the location of the point on the polar plot.

Note: point in series must be ordered by x for series to be displayed in a right way.

Take a look at the very basic sample of polar chart:

Polar plot configuration

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

Radius size

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

Here is a sample of the polar 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 50%:

Start angle

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

Sample chart with starting angle shifted to 90°:

Plot background

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

Sample polar chart with tuned background:

Border settings

Polar chart 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 Polar 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 Polar 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 Polar 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 5 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:

Sample labels formatting:

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:

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

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

Sample polar chart with logarithmic axis:

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 polar 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 polar 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 <polar> 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

Polar 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

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