# Radar Charts

SpreadJS supports various types of radar charts that are used to compare two or more groups of values across various features or characteristics.

## Content

Radar charts display multivariate data on axes that radiate from a common center. They are commonly used to compare patterns across several dimensions, such as revenue, cost, performance, or evaluation metrics.
SpreadJS supports two radar-based chart types: Radar and Filled Radar.

>type=note
> **Note:** All samples in this topic use the Sales table introduced in the [Create Data Charts](/spreadjs/docs/features/data-charts/create-data-charts) topic. Ensure that the data source has been configured before adding a chart.

### Radar Chart

A radar chart connects data points across multiple radial axes to form a polygon, making it useful for comparing value distributions across dimensions.
![Radar chart](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Radar%20chart.87092e.png?width=550)
Refer to the following sample code to add a radar chart.

```javascript
// Radar Chart
const sheet = spread.getActiveSheet();
sheet.name("Radar Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Radar Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.radar,
            encodings: {
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                category: {
                    field: "Salesman"
                },
                color: {
                    field: "Product"
                },
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["East"]
                        }
                    ]
                }
            }
        }
    ]
});
```

### Filled Radar Chart

A filled radar chart shades the area enclosed by the plotted values, making it easier to compare overall magnitude and relative distribution.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260402.626ec7.png?width=550)
Refer to the following sample code to add a filled radar chart.

```auto
// Filled Radar Chart
const sheet = spread.getActiveSheet();
sheet.name("Filled Radar Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
     tableName: 'Sales',
     config: {
         header: {
             title: "Filled Radar Chart"
         },
     },
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.filledRadar,
             encodings: {
                 values: [
                     {
                         field: "Sales",
                         aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                     }
                 ],
                 category: {
                     field: "Salesman"
                 },
                 color: {
                     field: "Product"
                 },
                 filter: {
                     operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                     conditions: [
                         {
                             field: "Region",
                             excludeMatched: false,
                             operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                             value: ["East"]
                         }
                     ]
                 }
             },
         }
     ]
});
```

## Line Aspect

Radar and Filled Radar charts support the `lineAspect` property to control how data points are connected around the radial axis.

| Data Type | Default | Spline |
| --------- | ------- | ------ |
| Radar | ![Radar chart](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Radar%20chart.87092e.png?width=300) | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.025cf7.png?width=300) |
| Filled Radar | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260402.626ec7.png?width=300) | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.cb8bb7.png?width=300) |

If `lineAspect` is set to `null` or `undefined`, the chart renders using the `Default` behavior.
**Example**

```javascript
config: {
  lineAspect: GC.Spread.Sheets.DataCharts.LineAspect.Spline
}
```