# Polar Area Chart

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

This type of chart is often useful when we want to show a comparison data like a pie chart, but also show a scale of values for context.

{% hint style="info" %}
You can find a more in depth explanation about the polar area on [this ](https://apexcharts.com/javascript-chart-demos/polar-area-charts/basic/)page:

[ ](https://apexcharts.com/javascript-chart-demos/polar-area-charts/basic/)[https://apexcharts.com/javascript-chart-demos/polar-area-charts/basic/  ](https://apexcharts.com/javascript-chart-demos/polar-area-charts/basic/)
{% endhint %}

![Polar Chart No Stroke](https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2FHywGRiw1LLXmbNY3lznv%2Fimage.png?alt=media\&token=3a599f8b-02b1-4b53-8c11-6bf3fd820f86)

**Properties of Polar Area Chart**

<table data-header-hidden><thead><tr><th width="150"></th><th width="150"></th><th width="150"></th><th width="150"></th></tr></thead><tbody><tr><td><strong>Property Name</strong></td><td><strong>Data type</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>Data source</td><td>List</td><td>Data Model</td><td>Data list source for the widget.</td></tr><tr><td>Label</td><td>Text</td><td>Expression</td><td>Labels to be used for each series</td></tr><tr><td>Value</td><td>Number</td><td>Expression</td><td>Values to be used for each series.</td></tr><tr><td>Chart Color</td><td>Text</td><td>Expression</td><td><p>Colors to be used for each series.</p><p> </p><p>Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats.</p></td></tr><tr><td>Height</td><td>Text</td><td>Expression</td><td><p>Can be set to auto, percentage of container or pixels.</p><p> </p><p>Default is auto.</p></td></tr><tr><td>Width</td><td>Text</td><td>Expression</td><td><p>Can be set to percentage of container or pixels.</p><p>Examples:</p><p> </p><p>"350" or "350px" or "50%"</p></td></tr><tr><td>Show Scale</td><td>Boolean</td><td> </td><td>Determines if a scale is shown.</td></tr><tr><td>Show Grid</td><td>Boolean</td><td> </td><td>Determines if the grid is shown.</td></tr><tr><td>Grid color</td><td>Text</td><td>Expression</td><td><p>Defines the colour of the grid.</p><p>You should only provide either hex or rgb/rgba format.</p><p> </p><p>Example: "#fff"</p></td></tr><tr><td>Show strokes</td><td>Boolean</td><td> </td><td>Determines if strokes are shown.</td></tr><tr><td>Stroke Color</td><td>Text</td><td>Expression</td><td><p>Defines the color of the stroke.</p><p>You should only provide either hex or rgb/rgba format.</p><p> </p><p>Example: "#fff"</p></td></tr><tr><td>Show legend</td><td>Boolean</td><td> </td><td>If true, it will show a legend explaining the data on the chart.</td></tr><tr><td>Legend Position</td><td>Text</td><td>Dropdown</td><td>Determines the position of the legend. (Left, Top, Right, Bottom).</td></tr><tr><td>Legend font size</td><td>Number</td><td>Expression</td><td><p>number of the fontsize in px.</p><p> </p><p>default 16px</p></td></tr><tr><td>Legend offset y</td><td>Number</td><td>Expression</td><td><p>Use for more specific positioning of the legend after using legend position.</p><p> </p><p>Sets the top offset for legend container</p><p>in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart. (Default is 0).</p></td></tr><tr><td>Legend offset x</td><td>Number</td><td>Expression</td><td><p>Use for more specific positioning of the legend after using legend position.</p><p> </p><p>Sets the left offset for legend container</p><p>in pixels. can use negative or positive and depending on the number it may cause the legend to have  clipping issues with the chart.(default is 0).</p></td></tr></tbody></table>