---
title: "Perspective - Radar"
description: "The Radar component compares multiple values across several dimensions simultaneously."
---
# Perspective - Radar
> The Radar component compares multiple values across several dimensions simultaneously.
**Component Palette Icon:**
The Radar component compares multiple values across several dimensions simultaneously, making this chart ideal for multi-dimensional performance analysis. Each dimension creates an additional spoke on the chart and represents a specific metric to compare values.
## Properties
|Name|Description|Property Type|
|---|---|---|
|data|Dataset powering the chart. Each row represents one radar dimension. Row value fields are then referenced in `axes.nameField` value for the dimension title, `axes.maxField` value for the dimension max limit, and each `series.valueField` value for the dimension values to plot. |array|
|axes| Radar dimension definitions that control how the spokes are labeled and scaled. **nameField**: Field key from data to use as the axis label. Value is string.**maxField**: Field key from data to use as the maximum value for each axis. This property determines the scale of each spoke independently. Value is string.**shape**: Determines the grid shape. Selecting `polygon` will display straight-edged rings, while `circle` will display concentric circles. Value is string.**axisLine**: Spoke lines radiating from center.**visible**: Shows the spoke line when true. Value is boolean.**color**: Sets the color of the spoke line.**split**: Concentric grid ring configuration.**count**: Number of concentric grid rings between the center and outer edge. Value is numeric.**line**: Configures the visibility and color of the concentric grid ring lines.**area**: Configures the visibility and color of the alternating shaded bands betweeen concentric rings.**label**: Axis name labels at the outer edge of each spoke.**visible**: Shows the axis name label when true. Value is boolean.**fontSize**: Font size of the axis name labels. Overrides `elementStyle.fontSize` when both are set. Value is numeric.**color**: The color of the axis name labels. Overrides `elementStyle.color` when both are set.**elementStyle**: Text style for a label rendered onto a chart canvas, including typography, alignment, box styling, and shadow.|object|
|series| Defines the fields to plot and how the polygon will render for each series.**label**: Field key from `data` to plot. One value per row, mapped to the corresponding axis. Value is string.**valueField**: Field key from `data` to plot. One value per row, mapped to the corresponding axis. Value is string.**color**: The polygon stroke and fill color. If left empty, color will be determined by `appearance.colorPalette`.**lineWidth**: The stroke width of the polygon in pixels. Value is numeric.**area**: Displays the polygon fill color, determined by the series color, when true. Value is boolean.|object|
|legend|The legend display configuration. **visible**: Shows the legend when true. Value is boolean.**position**: Determines the legend placement. Value is string.**orientation**: Horizontal or vertical layout direction of legend names. Value is string.**interactive**: Clicking a legend item toggles series visibility. Can also be set to **single** or **multiple** for single and multiple selections. Value is boolean or string.**fontSize**: The font size of the legend item labels. Value is numeric. |object|
|title| Chart title and subtitle. **visible**: Shows the title text when true. Value is boolean.**text**: Main title text. Value is string.**color**: The color of the title text. Overrides `elementStyle.color` when both are set.**fontSize**: The font size of the legend item labels. Value is numeric.**subtitle**: Configures the subtitle under the title, including text, color, size, and style.**position**: Determines the legend placement. Value is string.**gap**: Pixel gap between the main title and subtitle. Value is numeric.**elementStyle**: Text style for a label rendered onto a chart canvas, including typography, alignment, box styling, and shadow.|object|
|appearance| Configures the chart theme and layout. **colorPalette**: Auto-assigned to any series without an explicit color, in order. **backgroundColor**: Chart background fill color. **fontSize**: Base font size for labels and tooltip text. Value is numeric.**radius**: Outer radius of the radar as a percentage of the container or absolute pixels. Value is numeric.**centerX**: Horizontal center position as a percentage of the container. Value is numeric.**centerY**: Vertical center position as a percentage of the container. Value is numeric.**tooltip**: Configures tooltip behavior. See the [tooltip properties](#tooltip-properties) below for more information.|object|
|style|Style configuration for the chart. Full menu of [style options](appendix\reference-pages\style-reference.md) is available. You can also specify a [style class](ignition-modules\perspective\styles\style-classes\style-classes.md).|object|
### tooltip Properties
|Name|Description|Property Type|
|---|---|---|
|visible| Shows the tooltip when true.|boolean|
|format|Sets the tooltip display format. Configurations set here will apply to all pens. Options include: **type**: Sets the format type as either `value` or `template`, depending on whether the user wants to only customize the value display within the default tooltip format, or replace the default tooltip format entirely with a customized template. Value is string.**value/template**: Expression applied to each layout per the `format` type selected. The dropdown will display default options, but manual entries are accepted. Value is string. See the [tooltip Formatting Options](#tooltip-formatting-options) section for more descriptions and examples on how to customize a tooltip.|object|
#### tooltip Formatting Options
Tooltip display can be customized with the following built-in formatting properties and token options. Tokens serve as placeholders that will be replaced with live data during runtime. They are case-sensitve, include no spaces, and must be enclosed with curly braces. Index suffixes are accepted when entered as the series number following a colon.
All tooltips will render using the en-US locale unless otherwise specified. When translated, text is processed as a whole phrase. Additionally, tooltips are HTML, so basic markup works within templates. However, the tooltip value expression is not HTML so `{value}` shows the value literally. The table below describes the available tokens that can be used, as well as some possible format examples.
|Token|Description|Example Format|Example Output|
|---|---|--------------|------------|
|`{value}`| The y-axis value. When `value` is selected as the `format.type`, default dropdown options include `%`, `kW`, and `°F`. However, any unit can be entered before or after `{value}` by typing directly into the field for either type selection.| `${value}`
||
|`{marker}`| Displays the `series[].color` selection as an identifying marker dot. Available for `template` types only.|`{marker}{series}: {value}%`
||
|`{series}`| Displays the `series[].label` text. Available under `template` types only.|`{series}: {value}`
||
|`{category}`|Displays the x-axis value. Available under `template` types only. |`{category} — {marker}{series}: {value}`
||
|`{sum}`| Displays the total y-axis value for all series data sharing an x-axis category. Available under `template` types for stacked and diverging variants only. |`{category} - {series:0}: {value:0}
``{category} - {series:1}: {value:1}` `{category}: {sum}`
||
## Component Scripts and Events
The Radar component also has Component Events associated with it. See the [Perspective - Radar Scripting](perspective-radar-scripting.md) page for more information.
## Example
The example chart uses the following `data` values for Lassie, Buddy, and Duke. These values are then referenced in the `series` configuration to assign the given values and titles.
`data.0`
* `dimension`: Strength
* `max`: 10
* `lassie`: 6
* `buddy`: 8
* `duke`: 10
`data.1`
* `dimension`: Agility
* `max`: 10
* `lassie`: 8
* `buddy`: 4
* `duke`: 5
`data.2`
* `dimension`: Intelligence
* `max`: 10
* `lassie`: 10
* `buddy`: 3
* `duke`: 6
`data.3`
* `dimension`: Appearance
* `max`: 10
* `lassie`: 7
* `buddy`: 10
* `duke`: 4
`data.4`
* `dimension`: Speed
* `max`: 10
* `lassie`: 8
* `buddy`: 6
* `duke`: 4
|Property|Value|
|---|---|
|axes.nameField|dimension|
|axes.maxField| max|
|series.0.label| Lassie|
|series.0.valueField| lassie|
|series.0.color|#8A5516|
|series.1.label| Buddy|
|series.1.valueField| buddy|
|series.1.color|#D6A508|
|series.2.label| Duke|
|series.2.valueField| duke|
|series.2.color|#000000|