===== RadarChart =====

com.ergotech.vib.graphics.javascript.charting.RadarChart

==== Image Examples ====

| {{:mistudio:graphics:charts:pasted:20260701-203741.png?40|RadarChart in the graphics palette}} | {{:mistudio:graphics:charts:pasted:20260701-203827.png?200|RadarChart graphic example}} |
| //RadarChart in the graphics palette.// | //RadarChart graphic example.// |

==== Overview ====

The RadarChart graphic is a chart graphic used to display values around a circular or web-style chart.

RadarChart is commonly used to compare several related values at the same time.

Each radar axis represents a category, and the connected shape shows the values for those categories.

==== Common Uses ====

  * Comparing related categories
  * Showing performance across several areas
  * Displaying survey or score data
  * Showing one-dimensional array values visually
  * Building dashboard summary graphics
  * Comparing values such as departments, metrics, or categories

==== Input Behavior ====

RadarChart accepts input through **valueInput**.

The input can come from a data source, Constant, BroadcastServer, or another logic component.

RadarChart works well with one-dimensional array-style data.

A common test data source is:

  * **ArrayDataSource**

When an ArrayDataSource is connected to RadarChart, the array values are plotted around the radar chart axes.

For predictable display, the array values should match the configured radar indicators. For example, if the RadarChart has five radar indicators, the connected array should provide five values.

==== Output Behavior ====

RadarChart is used as a display graphic.

RadarChart does not provide a default user-input output workflow.

==== RadarChart-Specific Behavior ====

RadarChart displays one or more values around configured radar axes.

RadarChart-specific settings include:

  * **Name** Sets the name of the RadarChart graphic.
  * **High Value** Sets the high value used for chart scaling or range behavior.
  * **Low Value** Sets the low value used for chart scaling or range behavior.
  * **Radar** Configures the radar chart shape, indicators, category names, and indicator ranges.
  * **Use1DInput** Enables the standard one-dimensional array input mode through **valueInput**.
  * **Use Color** Controls whether incoming colors are used when supported.
  * **UseTooltip** Controls whether chart tooltips are shown.
  * **Bad Qual. Indicator** Controls the indicator used when bad quality data is received.
  * **Visible** Controls whether the RadarChart is shown.
  * **Warning Qual. Indicator** Controls the indicator used when warning or transitional quality data is received.

==== Logic Ports ====

In the Logic Editor, RadarChart includes this default port:

  * **valueInput**

The **valueInput** port receives one-dimensional array-style chart data.

For standard RadarChart setup, leave **Use1DInput** enabled and connect a supported one-dimensional data source such as **ArrayDataSource** to **valueInput**.

==== Radar Configuration ====

RadarChart uses the **Radar** property to configure the radar chart structure.

The Radar editor includes a live preview and grouped settings for shape and indicators.

The Radar configuration defines the chart indicators. These indicators are the labels or categories shown around the radar chart.

Example radar indicators include:

  * Sales
  * Admin
  * Information Tech
  * Customer Support
  * Marketing

Each indicator represents one axis on the radar chart.

==== Editing Radar Indicators ====

To edit the radar indicators:

  - Select the RadarChart graphic in the Design Editor.
  - In the Basic properties, open the **Radar** property editor.
  - Review the chart in the **Preview** section.
  - In the **Shape** section, set the overall **Radius (%)** value.
  - Choose whether the radar chart should be **Circular**.
  - In the **Indicators** section, select an indicator tab, such as Sales, Admin, Information Tech, Customer Support, or Marketing.
  - Edit the selected indicator **Name**, **Min**, and **Max** values.
  - Use the **+** button to add another indicator.
  - Use the **-** button to remove the selected indicator.
  - Click **OK** to save the radar settings.

{{:mistudio:graphics:charts:pasted:20260706-192408.png?500|RadarChart Radar editor}}

//RadarChart Radar editor with preview, shape, and indicator settings.//

==== Radar Editor Settings ====

The Radar editor includes these sections:

  * **Preview** Shows a preview of the configured radar chart.
  * **Shape** Controls the overall radar shape.
  * **Indicators** Configures the radar indicator axes.

The **Shape** section includes:

  * **Radius (%)** Sets the size of the radar chart as a percentage.
  * **Circular** Controls whether the radar grid uses a circular shape.

The **Indicators** section includes tabs for each configured radar indicator.

Each indicator includes:

  * **Name** Sets the label for the selected radar indicator.
  * **Min** Sets the minimum value for the selected radar indicator.
  * **Max** Sets the maximum value for the selected radar indicator.

==== Multiple Indicator Behavior ====

Each visible radar axis needs a matching configured indicator in the **Radar** property.

For example:

<code>
One array value   = first radar indicator
Two array values  = first two radar indicators
Five array values = five radar indicators
</code>

If the chart has more array values than configured indicators, extra values can fail to appear as separate radar points.

==== Array Data Behavior ====

ArrayDataSource can be used for RadarChart testing.

When ArrayDataSource is connected to RadarChart, the array values are plotted across the configured radar indicators.

For example:

<code>
Array value 1 -> first radar indicator
Array value 2 -> second radar indicator
Array value 3 -> third radar indicator
Array value 4 -> fourth radar indicator
Array value 5 -> fifth radar indicator
</code>

If the RadarChart has five configured indicators, use an array with five values for predictable display.

==== Tooltip Behavior ====

The **UseTooltip** property controls whether RadarChart displays tooltip information when the user hovers over the chart.

Tooltips are useful for showing the exact value of a radar point.

==== Notes ====

Use RadarChart when several related values should be compared in one chart.

Use **ArrayDataSource** for simple RadarChart testing.

Use numeric or array-style data sources with RadarChart. String data sources are not appropriate for numeric radar chart input.

RadarChart is intended for one-dimensional category values, not full x/y table-style chart data.

RadarChart is separate from LineChart, BarChart, PieChart, and DoughnutChart. Use RadarChart when values need to be compared across circular category axes.

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:charts:start|Charts]]
  * [[mistudio:design_editor:charts:linechart|LineChart]]
  * [[mistudio:design_editor:charts:barchart|BarChart]]
  * [[mistudio:design_editor:charts:bigdatalinechart|BigDataLineChart]]
  * [[mistudio:design_editor:charts:piechart|PieChart]]
  * [[mistudio:design_editor:charts:doughnutchart|DoughnutChart]]
  * [[mistudio:getting_started:test_data_sources|Using Test Data Sources]]
  * [[mistudio:getting_started:connect_data_source_to_graphic|Connecting a Data Source to a Graphic]]