Polar Charts

Overview

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
chart.xScale().maximum(360);

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

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

JsFiddle Playground

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
polar2.startAngle(90);

JsFiddle Playground

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"},
];

JsFiddle Playground

Axes

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
chart.yAxis().stroke({
  color: "gray",
  thickness: 2,
  dash: "10 5"
});  

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

JsFiddle Playground

Scales

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


JsFiddle Playground

Grids

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
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"
});

JsFiddle Playground

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"]);

JsFiddle Playground

Supported Types

Here is the list of supported polar charts: