Polar Chart


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


AnyChart allows to display three types of series on a Polar chart: Line, Area and Marker. You should create a chart using anychart.polar() method to display Polar chart:

  // chart type
  chart = anychart.polar();

  // series type and data setting
    {x: 0, value: 0},
    {x: 10, value: 1},
    {x: 20, value: 2},
    {x: 30, value: 3},
    {x: 40, value: 4},
    {x: 50, value: 5},
    {x: 60, value: 6},
    {x: 70, value: 7},
    {x: 80, value: 8},
    {x: 90, value: 9},
    {x: 100, value: 10}

As you can see each point is represented with x and value fields, where x is an angle.

Here is a basic Polar sample:

JsFiddle Playground


Polar chart has several distinctive configuration options which are presented in section "Chart rotation and background settings".

Start angle

By default in Polar charts drawing starts from the top center point (0°), but you can change this using .startAngle() parameter:


Below you can see our sample chart with starting angle shifted to 90°:

JsFiddle Playground

Plot background

You can change polar background using .background() method. Learn more about it in Background settings tutorial.

    .enabled(true)                                  // enables background
      keys: ['.1 white', '.7 gray', '.9 darkgray'], // set gradient colors
      angle: -130                                   // set angle of colors drawing

Here is a sample of a polar chart with tuned background:

JsFiddle Playground


In AnyChart axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale and settings and else. All axis features are described in Axes Basics tutorial.


Axis stroke appearance is controlled by .stroke() parameter.

  // set chart type
  var chart = anychart.polar();

  // adjust y axis visualization
  chart.yAxis().stroke('2 #9900FF');  // set stroke thickness equal to 2px and set custom color to the stroke

More information on possible stroke settings can be found in Strokes and Lines tutorial.

Here is a sample of tuned X and Y axes. Y axis has a dashed stroke and X axis has a stroke colored with gradient.

JsFiddle Playground


AnyChart allows to invert any axis. Inversion is controlled by axis .inverted() parameter:


Take a look at the demonstration of Y Axis inversion on the sample below:

JsFiddle Playground

Logarithmic Scale

Logarithmic scale can be used in polar charts. You can set the scale type using .scale() method. More information about scale types can be found in Scale tutorial

  var logScale = anychart.scales.log();   // create logarithmic scale
  logScale.minimum(10).maximum(10000);    // set minimum and maximum value for the scale
  chart.yScale(logScale);                 // set logarithmic scale as y scale for the chart

And here is the demonstration of Logarithmic Y Axis on a simple polar with area series:

JsFiddle Playground

Labels Settings

AnyChart allows to customise Axes Labels in any required way. Below there is a sample of tuned x and y axes. X-axis labels have ° after the value and Y axis has its negative values set in brackets.

  // chart type
  var chart = anychaty.polar();

  // set y axis labels position and format content
    var value = this.value.toFixed(1);
    if (value<0)                                            // check if axis value is negative
      value = '(' + (this.value * (-1)).toFixed(1) + ')';   // set negative values into brackets and minus sign
     return value.toString();

  // settings for x axis labels
    .padding(5)                   // set labels padding
    .fontWeight(900)              // set font weight for labels
      return this.value + '°';    // add '°' to every label of x axis

JsFiddle Playground

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

  // axes settings
    .labels()                   // settings for labels
      .padding(5)               // set padding for labels
      .fontWeight(900)          // set font weight for labels
      .background()             // background settings
        .enabled(true)          // enable background
        .fill('lightblue')      // background fill
        .stroke('blue')         // stroke color
        .cornerType('round')    // corner type
        .corners(5);            // corner size

JsFiddle Playground

You can hide first and/or last labels using .drawFirstLabel() and .drawLastLabel() parameters:

    .drawFirstLabel(false)  // hides first label of Y-Axis
    .drawLastLabel(false);  // hides last label of Y-Axis

JsFiddle Playground


In this section we will describe the main parts of a polar chart style and demonstrate how style can be applied.

The main idea of styles is to segregate visualization and data definition. Visual appearance of columns can be defined using certain methods.


Polar grid is a combination of circular and radial grids. Grid visual appearance can be controlled with several parameters:

  // chart type
  var chart = anychart.polar();
    .evenFill('white 0.9')    // coloring odd cells of the grid
    .oddFill('lightgray 0.9') // coloring even cells of the grid
    .layout('curcuit')        // set layout type

Note: full information about grid settings can be found in grid section of Scale tutorial

This sample below demonstrates two polar charts with adjusted visualisation of the radial type of grid as well as of the circular one.

JsFiddle Playground

Labels and Tooltips

In this section we will explain how to add and configure data labels and tooltips. To configure data labels and tooltips for all series use .labels() and .tooltip() methods. These will help you to adjust visual appearance, positioning and format.

Let's do that with the following example: we will make data labels bold, format labels so they show only the the value of the point and tooltips to show detailed description.

When formatting tooltips, we use .contentFormatter() to adjust source of content and visual appearance. To control labels’ position we may use .position() parameter.

Next sample demonstrates bold series labels which display value of a point and tooltip shows detailed description.

  // adjust series visual settings
    .stroke('darkblue')                             // stroke color
    .fill('lightblue 0.8')                          // fill color
    .labels()                                       // labels settings
      .enabled(true)                                // enable labels
      .fontWeight(900);                             // labels font weight
  // visual setting for tooltips
  series.tooltip().content().fontWeight(400);       // settings for tooltip content font
  // format tooltip content
    // summarize all values
    var sum = 0;
    for (var i=0;i<dataSet.mapAs().getRowsCount();i++)
      sum +=dataSet.mapAs().get(i, 'value');
    // setting tooltip content
    return 'Value: ' + this.value + '\nPercent: ' + (this.value/(sum/100)).toFixed(2) + '%';

JsFiddle Playground

Series Types

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

JsFiddle Playground

Missing Points

Polar Chart allows to omit one or several points in a data set. To miss a point set 'missing' into the value field. On the sample below points from 60 to 70 are missing.

JsFiddle Playground

You are looking at an outdated 7.5.1 version of this document. Switch to the 8.1.0 version to see the up to date information.