Pie/Donut Chart | X4Documentation

A pie chart can be used to illustrate the proportion of individual data in the totality.

Instructions for use

A pie/donut chart is created using the <Pie> element within the <Chart> element. The element can only be used in the layout of a Detail Component.

XML

<Chart>
    <Pie/>
</Chart>

The <Pie> element can contain the following element:

<Tooltip>: Defines how the tooltip for each value should be displayed in the chart.

Attribute

You can define the following attributes for all elements of a pie/donut chart:

Attribute	Description
`fontFamily`	Specifies the font family. This attribute overwrites the default Web App font for this layout. If the attribute is defined on an element, the font family is inherited by any child elements unless the `fontFamily` attribute is explicitly defined for the child elements. Possible values: `MainFont`: stored main font Fontcode from the font palette, e.g. `Font04`
`fontSize`	Sets the font size. This attribute overrides the default Web App font size for this layout. Possible values: Any integer or decimal number with a period as a decimal separator, e.g. `20` ; `20.8` ; `.9` Font size in pixels, e.g. `20px` Font size in points, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` oder `120%` Keywords: `xx-Small` , `x-small` , `small` , `medium` , `large` , `x-large` , `xx-large` , `smaller` , `larger`
`fontStyle`	Defines the tilt of the font. This attribute overrides the default font tilt for this layout. Possible values: `italic`: Italic font `normal`: Normal font (default) `oblique`: Slanted font style (calculated)
`fontWeight`	Defines the font weight. This attribute overrides the default font weight for this layout. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`foreground`	Defines the font color. This setting overrides the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Note: Do not use a hash before the color value. Do not use an abbreviated notation of the color value. Color code from the color palette of the Web App, e.g. `A200` For more information, see Theming.

`<Pie>` element

Defines how the chart is displayed.

In addition to the general attributes, you can define the following attributes for the <Pie> element:

Attribute	Description
`data`	Required Specifies which data are displayed in the chart. The specified string refers to a defined property within the data source specified in the `<Chart>` element. Possible values: Data binding possible
`name`	Required Defines the name associated with the respective value (data label). The specified string refers to a defined property in the provided `data`. Possible values: Data binding possible
`value`	Required Specifies which value of the data object is visualized. The specified string refers to a defined property in the provided `data`. Possible values: Data binding possible
`avoidLabelOverlap`	Specifies whether to prevent the overlapping of labels. Possible values: `true` (default): The overlapping of labels is prevented. `false`: The overlapping of labels is not prevented.
`center1`	Specifies the horizontal position of the chart. Possible values: Any Integer (default: `50`)
`center2`	Specifies the vertical position of the chart. Possible values: Any Integer (default: `50`)
`color`	Color of each chart pane Possible values: Hexadecimal color value or expression for data binding (Color) If the `color` attribute is not defined, the colors defined in theTheming Editor are used.
`donut`	Specifies whether the chart should be displayed as a donut chart. Possible values: `true` / `false` (default)
`labelColor`	Defines the font color of the label. Overrides the color of all chart labels. Possible values: Hexadecimal color value, e.g. `ff5a00` Note: Do not use a hash before the color value. Do not use an abbreviated notation of the color value. Color code from the color palette of the Web App, e.g. `A200` For more information, see Theming.
`labelOverflow`	Specifies what should happen if the label is longer than the specified width of the label. Possible values: `none`: Prevents text wrapping (default) `truncate`: Use `...` to show that the text is not finished. `break`: break off text between words `breakAll`: Break off text within word
`labelWidth`	Defines the width of the label in pixels. Possible values: Any integer
`legend`	Specifies whether to display a legend. Possible values: `true` (default) `false`
`normals`	Specifies whether the values should be labeled directly in the chart. Possible values: `true` `false` (default)
`radius1`	Sets the radius in pixels. Possible values: Any Integer (default: `50`)
`radius2`	Sets the outer radius in pixels. Only relevant if the attribute `donut="true"` is set. Possible values: Any Integer (default: `80`)
`tooltipPercentage`	Specifies whether a percentage is displayed in addition to the value in the label and tooltip. Possible values: `true` (default): Percentage value is displayed. `false`: Percentage value is not displayed.

`<Tooltip>` element

Child element of <Pie> . Defines how the tooltip for each value should be displayed in the chart.

For the <Tooltip> element, you can define the general attributes (see above).

Example

XML

<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="ABC-Analysis" type="List">
			<Property name="ItemGroup" type="String"/>
			<Property name="Profit" type="Integer"/>
		</Property>
	</Property>
</Properties>
<FlowLayout>
	<Chart fontFamily="Font03" title="ABC-Analysis / Profit from different item groups">
		<Pie data="#DataSource.ABC-Analysis" fontFamily="Font03" name="#ItemGroup" normals="false" value="#Profit">
           <Tooltip fontFamily="Font03"/>
        </Pie>
	</Chart>
	<Chart fontFamily="Font02" title="ABC-Analysis / Profit from different item groups">
		<Pie data="#DataSource.ABC-Analysis" donut="true" fontFamily="Font03" name="#ItemGroup"  normals="true" value="#Profit">
			<Tooltip fontFamily="Font03"/>
		</Pie>
	</Chart>
</FlowLayout>

Output

The data supplied by the Technical Process are in the followoing format:

XML

<Ok>
	<DataSource>
		<ABC-Analysis>
			<ItemGroup>A</ItemGroup>
			<Profit>1200000</Profit>
			<ItemGroup>B</ItemGroup>
			<Profit>500000</Profit>
			<ItemGroup>C</ItemGroup>
			<Profit>90000</Profit>
			</ABC-Analysis>
	</DataSource>
</Ok>

Instructions for use

Attribute

<Pie> element

<Tooltip> element

Example

`<Pie>` element

`<Tooltip>` element