# Spider Chart

Spider chart is also known as Radar chart which is used to plot values of each category along the axis which starts at the center of the chart and extends up to the end of the radius. It is a two-dimensional chart type designed to plot one or more series of values arranged in the form of spokes.

{% hint style="success" %}
*Check out the below given walk-through on how to use the Spider chart component in Designer module.*
{% endhint %}

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2F1EiF0NxA2adxpQouE1k6%2FSpiderChart.gif?alt=media&#x26;token=5cd25913-c9ff-48f0-87c1-f9b9bfff4834" alt=""><figcaption><p><em><strong>Using Spider chart</strong></em></p></figcaption></figure>

## **Best Situations to Use a Spider chart**

* To analyze performance areas in an organization.
* To compare allocated values and spending analysis in different departments.

### **Default Spider Chart Image**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2F0rbHNqT74Pu0fKSkLdTX%2Fspider_default.png?alt=media&#x26;token=1a9b27ca-e98e-465e-a430-9db408bf63fe" alt=""><figcaption></figcaption></figure>

## **Properties of the Spider chart**

### **General**&#x20;

The user can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. If the max button is unchecked, then they can’t maximize the chart separately. Chart type can be changed between Polygon and Circle. Also, web type can be changed between Fill and Stroke.

![](/files/Z6LcSD6KuySiWW5VGBHp)

### **Tooltip**

If the user wants to show the description of the series can use the tooltip by enabling it.

![](/files/eo4hNdSmsPNTuxE26zKM)

### **Background**

The user can change the background color of the chart, get the border for the chart, and change the border color. The user can get the reflection of the chart by enabling the shadow option to change the color and increase or decrease the transparency of the shadow.

![](/files/BKuC99XEedVSuYTmat4L)

### **Title**

The user can change Title Name, font color, font size, font style, etc.

![](/files/9YScdbwyryFr4FqIojeW)

### **Sub Title**

The user can enable the subtitle if the user has any second title and also change the name, font color, font size, font style, etc.

![](/files/EkLFtNyN35DqsIjRZWdz)

### **Legend**

The user can enable the internal legend to show it and change the font size, font color, font style, etc.

![](/files/qb2m41CrLhqTLAChpYie)

### **Formatter**

The user can change units to % or none. The user can set the Precision option to see value in decimal format. The user can display currency value in INR, Pound, USD. The position of the currency symbol can be set as Prefix (if the currency is in INR format) otherwise, it can appear on the right-side as Suffix. Number Formatter can set it in Indian or International.

![](/files/0Bo6WrLX2nFGlOmiVFwV)

### **Axis Labels**

The user can change the category label properties as well as the axis label values. It is able to change the font color, size, style, weight, and font family.

![](/files/lN2kMshzTOiYE0AlLxbF)

### **Export Options**

The Export Options also helps to provide heading, subheading, file name. The user can also select an option for ***Global Export Type***.

<figure><img src="/files/SsON4AM5zVTPWaRbisHm" alt=""><figcaption></figcaption></figure>

The user can enable the ***Enable Context Menu*** from the preview section to download the reports in different formats.

<figure><img src="/files/6JyvsosyodvQBesFaoH8" alt=""><figcaption></figcaption></figure>

## **Different Variants of Spider charts**&#x20;

**Spider chart with Polygon Chart type and Web type Fill**

<figure><img src="/files/WoCv8is1ruriPl4IN7p1" alt=""><figcaption></figcaption></figure>

**Spider chart with Circle Chart type and Web type Stroke**

<figure><img src="/files/1sBn7qGpTHUxroj5MMDk" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
*<mark style="color:green;">Please Note</mark>: The user needs to set the opacity for the series field approximately 0.5 to get the proper plotting of the selected data.*
{% endhint %}

## Sample Data&#x20;

Download the given sample data and map it as mentioned below to plot your ***Spider Plot*** chart.&#x20;

Select the ***Department*** column as ***Category*** field and ***Allocated\_Budget*** as well as ***Actual\_Spending*** columns as ***Series*** fields to plot the data.

{% file src="/files/gus5ifiZus1tHsuOK9bU" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bdb.ai/governed-dashboards-5/charts-gallery/charts/spider-chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.