Polar Charts


A polar chart is a scatter chart drawn in the polar coordinate system – a two-dimensional coordinate system where each point is determined by a distance from a fixed point and an angle from a fixed direction.

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

Quick Start

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

Then add one of the supported series types from this enum: anychart.enums.PolarSeriesType. If you just pass your data to the chart constructor, a Marker series is created.

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

// create data for the first series
var data_1 = [
  {x: 0, value: 500},
  {x: 180, value: 200},

// create data for the second series
var data_2 = [
  {x: 0, value: 0},
  {x: 180, value: 200},

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

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

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

// set the maximum value of the x-scale

// set the container id

// initiate drawing the chart


Start Angle

You can set the start angle of a polar 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


Missing Points

It is possible to skip a point or several points in a data set of a polar chart. Just write "missing" in the value field of a point you want to skip:

// create data
var data = [
  {x: 0, value: 500},
  {x: 180, value: 200},
  {x: 360, value: "missing"},



To learn about axes in general, see the Axes and Grids section.

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

// configure the appearance of the y-axis
  color: "gray",
  thickness: 2,
  dash: "10 5"

// configure the appearance of the x-axis
  color: "#00cc99",
  thickness: 4,



To learn about scales in general, see the Scales section.



This section explains how to configure the appearance and layout of grids on polar 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.


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

// configure the stroke of the x-grid
  color: "green",
  thickness: 0.5,
  opacity: 0.5

// configure the stroke of the circular grid
  color: "green",
  thickness: 0.5,
  opacity: 0.5,
  dash: "10 5"


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
polar1.xGrid().palette(["gray 0.05", "gray 0.1"]));

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


Stacked Polar Charts

Stacked and percent stacked charts are multi-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 polar 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 polar charts:

See also stacked charts: