Perspective - Radar

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 below for more information.	object
style	Style configuration for the chart. Full menu of style options is available. You can also specify a style class.	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 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 <b>{value}</b> 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.	<b>{series}</b>: {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}<br/> {category} - {series:1}: {value:1} {category}: {sum}

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

The Radar component also has Component Events associated with it. See the Perspective - Radar Scripting 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