Pie Chart

This component displays a pie chart.

Note

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

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string		The [id] property cannot be set by actions.
2	Width	String	415	width	string	415	Component width
3	Height	String	515	height	string	515	Component height
4	X	String		x	string		X coordinate position
5	Y	String		y	string		Y coordinate position
6	Chart Type	Selection 1. Pie 2. 3D Pie 3. Donut	Pie	chartType	string	pie	Chart drawing type
7	Visibility	Boolean	ON	visibility	boolean	true	Display state
8	Value	Table format [Details 1]	[Details 1]	value	array of object	[Details 1]	Chart data
9	Series	Table format [Details 2]	[Details 2]	series	object	[Details 2]	Series drawing settings
10	Legend	Table format [Details 3]	[Details 3]	legend	object	[Detail 3]	Legend settings

Note

• 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