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

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

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

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

## Scales

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

``````
``````

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

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

## Supported Types

Here is the list of supported polar charts:

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