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.

Modules

Polar charts require adding the Core and Polar modules:

<script src="https://cdn.anychart.com/releases/8.14.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.14.0/js/anychart-polar.min.js"></script>

Learn more: Modules.

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();

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

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

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

Playground

Scales

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

Polar charts have one special setting that changes how polar chart behave: by default polar plot is an implementations of a standard polar coordinate system where both x and y coordinates are considered numbers, this mode is usually used for mathematical purposes.

In this case you usually need to set minium and maximum values, as well as tick intervals:

// set the maximum value of the x-scale chart.xScale().maximum(360); // configure Y scale chart.yScale().minimum(0).maximum(600); chart.yScale().ticks().interval(100);

Here is a sample of such plot with a cardioid:

Playground

But in some data visualization cases it may be useful to work with polar chart is a slightly different way that resembles, in a way, Radar Charts. This is a case when X coordinates are texts, not numbers. To turn this mode of use the sortPointsByX() method and set X-scale type to ordinal:

// set the type of the x-scale chart.xScale("ordinal"); // enable sorting points by x chart.sortPointsByX(true);

With these setting you can use:

And create charts like this one:

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.

Stroke

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

Playground

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

Playground

Stacked Polar Charts

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