AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

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.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.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:

See also stacked charts: