> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Radar chart

> Compare measure values across categories on radial axes with the RadarChart component.

API reference: [RadarChart()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.radarchart/index.md) (function, alpha), [IRadarChartProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartprops/index.md) (interface, alpha)

A **radar chart** (also known as a spider chart or web chart) displays measure values on radial axes that radiate from a common center point. Each value of the `trendBy` attribute becomes a spoke, and each measure — or each value of the `segmentBy` attribute — is drawn as a polygon connecting the points along those spokes. Use it to compare profiles across several categories, for example, scores across competencies.

> **Alpha API:**
> [`RadarChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.radarchart/index.md) is `@alpha`: its shape is likely to change outside of the usual SemVer guarantees. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md) before you depend on it.

## [Buckets](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#buckets)

| Prop | Required | Takes | What it does |
| --- | --- | --- | --- |
| `measures` | Yes | One or more measures | Draws one polygon per measure. |
| `trendBy` | No | One attribute | Creates one spoke per attribute value. |
| `segmentBy` | No | One attribute | Splits the measure into one polygon per attribute value. Use it with a single measure. |
| `filters` | No | Filters | Limits the data the radar chart shows. |

For code samples of both layouts, see [Usage patterns](#usage-patterns).

## [Sorting](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#sorting)

[`RadarChart`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.radarchart/index.md) applies no default sorting. To sort the data, pass sort items in the `sortBy` prop. See [Sort items](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/execution/execution-model/index.md#sort-items).

## [Configuration](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#configuration)

Pass these options in the `config` prop. See [Chart configuration](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/chart-config/index.md) for details.

| Option | What it changes |
| --- | --- |
| `colors`, `colorPalette`, `colorMapping` | Colors of the polygons, one per measure or per `segmentBy` value. |
| `chartFill` | `type` sets how the polygons are filled: `"solid"`, `"pattern"`, or `"outline"`. The polygon borders keep their solid color. |
| `legend` | Whether the legend shows and where. The legend shows only with two or more polygons. |
| `xaxis`, `yaxis` | `xaxis.labelsEnabled` shows or hides the `trendBy` value labels around the chart. `yaxis.labelsEnabled` shows or hides the labels of the value scale, and `yaxis.min` and `yaxis.max` set its range. |
| `grid` | `enabled` shows or hides the grid lines of the value scale. |
| `dataLabels` | `visible` shows or hides the labels. `style: "backplate"` adds a background behind them. |
| `dataPoints` | `visible` shows or hides the dot at each data point. |
| `continuousLine` | `enabled: true` connects the polygon across missing values. |
| `enableCompactSize` | Hides the spoke and scale labels in small containers. |
| `separators` | Thousands and decimal separators in the number format. |

## [Limits](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#limits)

- A radar chart renders up to 10,000 polygons and up to 10,000 `trendBy` values. With more, the chart shows an error and `onError` receives a [`DataTooLargeToDisplaySdkError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.datatoolargetodisplaysdkerror/index.md). Filter the data to fit.
- A radar chart doesn't show axis names, even with `xaxis.name.visible` or `yaxis.name.visible` set to `true`.
- Radar charts are easiest to read with a small number of spokes, typically three to eight. Too many `trendBy` values make the polygons hard to read.

## [Usage patterns](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#usage-patterns)

### [Multiple measures](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#multiple-measures)

When you specify two or more measures, the radar chart draws one polygon per measure, all sharing the same spokes:

```tsx
<RadarChart
    measures={[Md.$Revenue, Md.$Costs]}
    trendBy={Md.Quarter}
/>
```

### [Single measure segmented by attribute](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#single-measure-segmented-by-attribute)

When you specify a single measure together with `segmentBy`, the radar chart draws one polygon per value of the `segmentBy` attribute instead:

```tsx
<RadarChart
    measures={[Md.$Revenue]}
    trendBy={Md.Quarter}
    segmentBy={Md.Region}
/>
```

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#structure)

```tsx
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { RadarChart } from "@gooddata/sdk-ui-charts";

<RadarChart
    measures={<measures>}
    trendBy={<attribute>}
    segmentBy={<attribute>}
    config={<chart-config>}
    …
/>
```

## [Example](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#example)

```tsx
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { RadarChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <RadarChart
        measures={[Md.$NrOfOpportunities, Md.$NrOfWonOpportunities]}
        trendBy={Md.Region}
    />
</div>
```

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/radar-chart/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`measures`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md#iradarchartbucketpropsmeasures) | [`AttributesMeasuresOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributesmeasuresorplaceholders/index.md) | Yes | Specify one or more measures whose values will be displayed on the radar chart. | [`IRadarChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md) |
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md#ibucketchartpropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Analytical backend, from which the chart will obtain data to visualize If you do not specify instance of analytical backend using this prop, then you MUST have BackendProvider up in the component tree. | [`IBucketChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md) |
| [`config`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsconfig) | [`IChartConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartconfig/index.md) | No | Configure chart's behavior and appearance. | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`drillableItems`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsdrillableitems) | [`ExplicitDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.explicitdrill/index.md)`[]` | No | Configure drillability; e.g. which parts of the visualization can be interacted with. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropserrorcomponent) | `ComponentType<`[`IErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md)`>` | No | React component to display in the event when there is an error with either obtaining the data from backend or with the data itself. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`execConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsexecconfig) | [`IExecutionConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iexecutionconfig/index.md) | No | Execution configuration, will provide the execution with necessary config before initiating execution. | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`exportTitle`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsexporttitle) | `string` | No | Set title to use for exported files. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`filters`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md#iradarchartbucketpropsfilters) | [`NullableFiltersOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.nullablefiltersorplaceholders/index.md) | No | Specify filters to apply on the data to chart. | [`IRadarChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md) |
| [`height`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsheight) | `number` | No | Set height of the chart (in pixels). | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsloadingcomponent) | `ComponentType<`[`ILoadingProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md)`>` | No | React component to display while loading data from the backend. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`locale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropslocale) | `string` | No | Set Locale for visualization localization. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`onDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondataview) | [`OnDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ondataview/index.md) | No | Called when the visualization loads a DataView, i.e. it receives data from the backend. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondrill) | [`OnFiredDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onfireddrillevent/index.md) | No | Called when user triggers a drill on a visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonerror) | [`OnError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onerror/index.md) | No | Called when an error occurs while loading data for the visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonexportready) | [`OnExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onexportready/index.md) | No | Called when the visualization is ready to be exported. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onLegendReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartcallbacks/index.md#ichartcallbacksonlegendready) | [`OnLegendReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.onlegendready/index.md) | No | Called when legend is rendered. | [`IChartCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartcallbacks/index.md) |
| [`onLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonloadingchanged) | [`OnLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onloadingchanged/index.md) | No | Called when loading status of the visualization changes - vis starts or stops loading | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`placeholdersResolutionContext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md#iradarchartbucketpropsplaceholdersresolutioncontext) | `any` | No | Resolution context for composed placeholders. | [`IRadarChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md) |
| [`segmentBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md#iradarchartbucketpropssegmentby) | [`AttributeOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributeorplaceholder/index.md) | No | Specify single attribute whose values will be used to segment the measure values. | [`IRadarChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md) |
| [`sortBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md#iradarchartbucketpropssortby) | [`SortsOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.sortsorplaceholders/index.md) | No | Specify how to sort the data to chart. | [`IRadarChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md) |
| [`trendBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md#iradarchartbucketpropstrendby) | [`AttributeOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributeorplaceholder/index.md) | No | Specify single attribute whose values will be used to create the radar spokes (axes). | [`IRadarChartBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.iradarchartbucketprops/index.md) |
| [`width`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropswidth) | `number` | No | Set width of the chart (in pixels). | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md#ibucketchartpropsworkspace) | `string` | No | Identifier of analytical workspace, from which the chart will obtain data to visualize. If you do not specify workspace identifier, then you MUST have WorkspaceProvider up in the component tree. | [`IBucketChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md) |