Radar Chart

This component displays a Radar Chart.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Width	string		390
Height	string		460
X	string
Y	string
Visibility	boolean	• on • off	on
Value	string
Scale	table
Series	table
Legend	table

Action

Item	Properties	Data Type	Options
id	string		automatic
width	string		390
height	string		460
x	string
y	string
visibility	boolean	• true • false	true
value	array of object
scale	object
series	array of object
legend	object

Tips

The following can be entered for the "Width" and "Height" property values.
If you want to display in px, specify only numerical values; if you want to display in %, specify % as the unit.
Operation will not be supported if you enter anything other than the following.
- number
- number%
- calc() function
The following can be entered for the [X] and [Y] property values.
If you want to display in px, specify only numerical values.
Operation will not be supported if you enter anything other than the following.
- number
- calc() function
The calc() function is a CSS function that enables calculations. (e.g. calc(100% - 30px))
The units that can be used with the calc() function are "%" and "px". Other units (e.g., em, rem, etc.) are not supported.
When the calc() function is used to specify the size, the appearance in the editor may differ from the appearance in the application.
Please confirm using the preview.

Example 1 Value (value)

[
  {"month":"02","company A":20,"company B":52,"company C":72,"company D":34},
  {"month":"03","company A":5,"company B":33,"company C":90,"company D":55},
  {"month":"04","company A":55,"company B":30,"company C":81,"company D":66},
  {"month":"05","company A":30,"company B":11,"company C":62,"company D":22},
  {"month":"06","company A":27,"company B":14,"company C":68,"company D":70},
  {"month":"07","company A":32,"company B":31,"company C":64,"company D":50},
  {"month":"08","company A":50,"company B":22,"company C":30,"company D":80},
  {"month":"09","company A":12,"company B":19,"company C":65,"company D":48},
  {"month":"10","company A":10,"company B":24,"company C":50,"company D":66},
  {"month":"11","company A":17,"company B":40,"company C":78,"company D":55}
]

Example 2 Scale (scale)

Sets the scale and tick.

Value	Max Ticks
month	10

Example 3 Series (series)

Set the drawing settings for the series.

ID	Value	Color	Point Color	Fill	Alpha
A	company A	#81C4E8	#81C4E8	#81C4E8	0.3
B	company B	#74A2E7	#74A2E7	#74A2E7	0.3
C	company C	#5E83BA	#5E83BA	#5E83BA	0.3

Example 4 Legend (legend)

Sets legend information.

Series	Horizontal Align	Vertical Align
A,B,C	right	top

The options for Horizontal Align are left | center | right (default).
The options for Vertical Align are top (default) | bottom.

Event

None