Displays the value of multiple metrics within a 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. Name: config.fillColor Type: STRING | Optional
|
Line Color | The color used by the radar chart line. Name: config.lineColor Type: STRING | Optional Default Value: #F44336
|
Title | The title displayed on the top part of the widget box. Name: title Type: STRING | Optional
|
Rendering | |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING | Optional
|
Visibility Condition | The expression that allows you to reduce the visibility of the element. Name: *ngIf Type: STRING | Optional
|
Width | The width of the widget (e.g. 500px). Name: config.width Type: STRING | Optional
|
Sub Elements | |
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. Name: filter Type: FILTER | Optional
|
Label | The metric alternative label. Name: label Type: STRING | Optional
|
Name | The metric whose value(s) must be loaded by the widget. Name: name Type: METRIC | Required
|
Unit | The unit of measurement to be displayed along the value. Name: unit Type: STRING | Optional
|
Advanced | |
Visibility Condition | The expression that allows you to reduce the visibility of the element. Name: *ngIf Type: STRING | Optional
|
Full Syntax Example
<radar-chart-widget
[title]="'Radar Chart'"
[config]="{
fillColor: '#007BFF',
lineColor: '#007BFF',
width: '500px'
}"
class="my-custom-class"
*ngIf="getUser().organizationId != null">
<metric
name="Temperature"
label="Temperature"
filter="fooBarFilter"
unit="°C"
*ngIf="getUser().organizationId != null"></metric>
</radar-chart-widget>