> Markdown version of [Polar, Wind Rose & Spiderweb](https://vaadin.com/docs/next/components/charts/charttypes/polar). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.polar"></a>Polar, Wind Rose, & Spiderweb Charts

Most chart types having two axes can be displayed in *polar* coordinates, where the X axis is curved on a circle and the Y axis from the center of the circle to its rim. Polar chart isn’t a chart type in itself, but can be enabled for most chart types with `setPolar(true)` in the chart model parameters. All chart-type-specific features are usable with polar charts.

Charts allow many sorts of typical polar chart types, such as *wind rose*, a polar column graph, or *spiderweb*, a polar chart with categorical data and a more polygonal visual style.

```java
// Create a chart of some type
Chart chart = new Chart(ChartType.LINE);

// Enable the polar projection
Configuration conf = chart.getConfiguration();
conf.getChart().setPolar(true);
```

You need to define the sector of the polar projection with a `Pane` object in the configuration. The sector is defined as degrees from the north direction. You also need to define the value range for the X axis with `setMin()` and `setMax()`.

```java
// Define the sector of the polar projection
Pane pane = new Pane(0, 360); // Full circle
conf.addPane(pane);

// Define the X axis and set its value range
XAxis axis = new XAxis();
axis.setMin(0);
axis.setMax(360);
```

The polar and spiderweb charts are illustrated in [Wind Rose & Spiderweb Charts](#figure.charts.charttypes.polar).

[Image: charts polarspiderweb]

Wind Rose & Spiderweb Charts

## <a id="charts.charttypes.polar.spiderweb"></a>Spiderweb Charts

A *spiderweb* chart is a commonly used visual style of a polar chart with a polygonal shape rather than a circle. The data and the X axis should be categorical to make the polygonal interpolation meaningful. The sector is assumed to be a full circle, so no angles for the pane need to be specified.

Note the style settings made in the axis in the following example:

```java
Chart chart = new Chart(ChartType.LINE);
...

// Modify the default configuration a bit
Configuration conf = chart.getConfiguration();
conf.getChart().setPolar(true);
...

// Create the range series
// Source: https://ilmatieteenlaitos.fi/lampotilaennatyksia
ListSeries series = new ListSeries("Temperature Extremes",
    10.9, 11.8, 17.5, 25.5, 31.0, 33.8,
    37.2, 33.8, 28.8, 19.4, 14.1, 10.8);
conf.addSeries(series);

// Set the category labels on the X axis correspondingly
XAxis xaxis = new XAxis();
xaxis.setCategories("Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec");
xaxis.setTickmarkPlacement(TickmarkPlacement.ON);
xaxis.setLineWidth(0);
conf.addxAxis(xaxis);

// Configure the Y axis
YAxis yaxis = new YAxis();
yaxis.setGridLineInterpolation("polygon"); // Webby look
yaxis.setMin(0);
yaxis.setTickInterval(10);
yaxis.getLabels().setStep(1);
conf.addyAxis(yaxis);
```

## <a id="polar-example"></a>Polar Example

**Flow** — `ChartTypePolar.java`

```java
Chart chart = new Chart();

Configuration conf = chart.getConfiguration();
conf.getChart().setPolar(true);
conf.setTitle("Polar Chart");

Pane pane = new Pane(0, 360);
conf.addPane(pane);

XAxis xAxis = new XAxis();
xAxis.setTickInterval(45);
xAxis.setMin(0);
xAxis.setMax(360);
Labels labels = new Labels();
labels.setFormatter("function() {return this.value + '°';}");
xAxis.setLabels(labels);
YAxis yAxis = new YAxis();
yAxis.setMin(0);
conf.addxAxis(xAxis);
conf.addyAxis(yAxis);

PlotOptionsSeries series = new PlotOptionsSeries();
PlotOptionsColumn column = new PlotOptionsColumn();
series.setPointStart(0);
series.setPointInterval(45);
column.setPointPadding(0);
column.setGroupPadding(0);

conf.setPlotOptions(series, column);

ListSeries col = new ListSeries(8, 7, 6, 5, 4, 3, 2, 1);
ListSeries line = new ListSeries(1, 2, 3, 4, 5, 6, 7, 8);
ListSeries area = new ListSeries(1, 8, 2, 7, 3, 6, 4, 5);

col.setPlotOptions(new PlotOptionsColumn());
col.setName(ChartType.COLUMN.toString());

line.setPlotOptions(new PlotOptionsLine());
line.setName(ChartType.LINE.toString());

area.setPlotOptions(new PlotOptionsArea());
area.setName(ChartType.AREA.toString());

conf.setSeries(col, line, area);
```