Pie Chart

This component displays a pie chart.

Tips

Tips

It can be changed to a 3D circle chart or a doughnut chart depending on the setting.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Width	string		415
Height	string		515
X	string
Y	string
Chart Type	option	• Pie • Pie 3D • Donut	Pie
Visibility	boolean	• on • off	on
Value	string
Series	table
Legend	table

Action

Item	Properties	Data Type	Options	Default value
ID	id	string		automatic
Width	width	string		415
Height	height	string		515
X	x	string
Y	y	string
Chart Type	chartType	string	•pie •pie3D •donut	pie
Visibility	visibility	boolean	• true • false	true
Value	value	array of object
Series	series	object
Legend	legend	object

Tips

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)

[
  {"value":44.33,"color":"#394E79","month":"Jan"},
  {"value":22.12,"color":"#5E83BA","month":"Feb"},
  {"value":53.21,"color":"#C2D2E9","month":"Mar"},
  {"value":34.25,"color":"#9A8BA5","month":"Apr"},
  {"value":24.65,"color":"#E3C5D5","month":"May"}
]

Example 2 Series (series)

Set the drawing settings for the series.

Value	Text	Color	Stroke	Stroke Width
value	month	color	#FFFFFF	2

Example 3 Legend (legend)

Sets legend information.

Id	Text	Color	Horizontal Align	Vertical Align
value	id	color	right	top

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

Event

None