Radar Chart

  • 1 minute(s) read

Displays the value of multiple metrics within a radar chart.

Radar Chart

Template Syntax

Below you can find some examples of how to use the component within a template. 


<radar-chart-widget [title]="'Product Averall Status'">

	
	<metric name="Health"></metric>
	<metric name="Usage"></metric>
	<metric name="Wear"></metric>
	<metric name="Performance"></metric>
	<metric name="Quality"></metric>
			
	
</radar-chart-widget>

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Radar Chart <radar-chart-widget>

Fill Color

The color used to fill the radar chart area with opacity 0.2, if not specified the line color is used instead.

Type: STRING | Optional

[config]="{fillColor: 'abc'}"

Line Color

The color used by the radar chart line.

Type: STRING | Optional

Default Value: #F44336

[config]="{lineColor: 'abc'}"

Title

The title displayed on the top part of the widget box.

Type: STRING | Optional

[title]="'Details'"

Rendering

CSS Class

The name(s) of the CSS class used to customize the widget layout.

Type: STRING | Optional

class="my-custom-class"

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Type: STRING | Optional

*ngIf="getUser().organizationId != null"

Width

The width of the widget (e.g. 500px).

Type: STRING | Optional

[config]="{width: '500px'}"

Sub Elements

Metric

The metric whose value must be rendered as a radar chart point.

Metric <metric>

Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Label

The metric alternative label.

Type: STRING | Optional

label="Temperature"

Name

The metric whose value(s) must be loaded by the widget.

Type: METRIC | Required

name="Temperature"

Unit

The unit of measurement to be displayed along the value.

Type: STRING | Optional

unit="&deg;C"

Advanced

Visibility Condition

The expression that allows you to reduce the visibility of the element.

Type: STRING | Optional

*ngIf="getUser().organizationId != null"