Pie/Donut Chart | X4Documentation

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

A pie/donut chart can contain the following elements:

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

General attributes

The following attributes are available 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. This attribute does not work for the `Image`, `Map` , and `HtmlDocument` 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. This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements. 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`
`fontStretch`	Defines the width of each character. This attribute overrides the default character width for this layout. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute does not work for the `Image`, `Map`, `Chart`, and `HtmlDocument` elements.
`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) This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements.
`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` This attribute does not work for the `Image`, `Map` , and `HtmlDocument` elements.
`foreground`	Defines the font color. This setting overrides the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (cf. Theming), e.g. `A200`

Pie

<Pie> : Defines how the chart is displayed.

In addition to the general attributes, <Pie> can have the following attributes:

Attribute	Description
`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.
`data`	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
`donut`	Specifies whether the chart should be displayed as a donut chart. Possible values: `true` / `false` (default)
`legend`	Specifies whether to display a legend. Possible values: `true` (default) / `false`
`name`	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
`normals`	Specifies whether the values should be labeled directly in the chart. Possible values: `true` / `false` (default)
`value`	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
`labelColor`	Defines the font color of the label. Overrides the color of all chart labels. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value, and do not use a shortened notation for the color value! Color code from the color palette of the Web App (cf. Theming), e.g. `A200`
`labelWidth`	Defines the width of the label in pixels. Possible values: Any integer
`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
`avoidLabelOverlap`	Specifies whether to prevent the overlapping of labels. Possible values: `True`: The overlapping of labels is prevented. `False`: The overlapping of labels is not prevented.
`radius`	Sets the radius in pixels. Possible values: Any integer
`radiusOuterDonut`	Sets the inner radius in pixels. Only relevant if the attribute `donut="true"` is set. Possible values: Any integer
`centerHorizontal`	Specifies the horizontal position of the chart. Possible values: Any integer
`centerVertical`	Specifies the vertical position of the chart. Possible values: Any integer
`tooltipPercentage`	Specifies whether a percentage is displayed in addition to the value in the label and tooltip. Possible values: `True`: Percentage value is displayed. `False`: Percentage value is not displayed.

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

For <Tooltip>, 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>

The example above results in the following chart: