Pie/Donut Chart | X4Documentation

A pie chart allows to illustrate the share of individual data in the total.

A pie chart can contain the following elements:

<Pie>: Defines how the diagram is to be displayed.
<Tooltip>: Child element of <Pie>. Defines how the tooltip for the single values within the chart is displayed.

General Attributes

The following attributes are provided for all elements of a pie chart:

Attribute	Description
`fontFamily`	Defines the font family. This attribute overrides the default font of the Web App for this control. If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the `fontFamily` attribute explicitly set. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: `MainFont`: Stored main font Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size. This attribute overrides the default font size of the Web App for this control. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: Any integer or decimal number with a dot as 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` or `120` Key words: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Sets the width of the single characters. This attribute overrides the default width of the characters of the Web App for this control. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontStyle`	Defines the font style. This attribute overrides the default style of the characters of the Web App for this control. Possible values: `italic`: italic characters `normal`: normal characters (default) `oblique`: italic characters (calculated) This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontWeight`	Defines the font weight. This attribute overrides the default style of the characters of the Web App for this control. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`foreground`	Defines the font color. This setting overwrites the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (see (7.4.0-en) Theming ), e.g. `A200`

Pie

<Pie>: Defines how the diagram is to be displayed.

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

Attribute	Description
`color`	Color of the single chart portion Possible values: Hexadecimal color value or data binding expression (Color) If the attribute `color` is not specified, the colors defined within the Theming Editor will be used.
`data`	Defines which data is displayed in the diagram. The specified string refers to a defined property within the data source specified in the `<Chart>` element. Possible values: Data Binding
`donut`	Defines whether the diagram is to be displayed as a donut diagram. Possible values: `true` / `false` (default)
`legend`	Defines whether a legend is displayed. Possible values: `true` (default) / `false`
`name`	Defines the name assigned to the respective value. The specified string refers to a defined property within the data for `data`. Possible values: Data Binding
`normals`	Defines whether the values are to be labeled directly in the diagram. Possible values: `true` / `false` (default)
`value`	Defines which value of the data object is visualized. The specified string refers to a defined property within the data for `data`. Possible values: Data Binding
`labelColor`	Sets the font color of the label. Overwrites the color of all labels of the chart. Possible values: Hexadecimal color value, e.g.`ff5a00` Do not use a hash before the color value or a shortened notation of the color value. Color code from the color palette of the web app (see Theming), e.g. `A200`
`labelWidth`	Sets the width of the caption in pixels. Possible values: Any integer
`labelOverflow`	Specifies what should happen if the caption is longer than the specified caption width. Possible values: `none`: Prevents text break (default) `truncate`: With `...` show that the text is not finished `break`: Break text between words `breakAll`: Break within the word
`avoidLabelOverlap`	Specifies whether to prevent labels from overlapping. Possible values: `True`: Overlapping of labels is prevented. `False`: Overlapping of labels is not prevented.
`radius`	Sets the radius in pixels. Possible values: Any integer
`radiusOuterDonut`	Sets the inner radius in pixels. Possible values: Any integer
`centerHorizontal`	Sets the horizontal position of the chart. Possible values: Any integer
`centerVertical`	Sets the vertical position of the chart. Possible values: Any integer
`tooltipPercentage`	Determines whether a percentage is displayed in the caption and tooltip in addition to the value. Possible values: `True`: Percentage is displayed. `False`: Percentage is not displayed.

<Tooltip>: Child element of <Pie>. Defines how the tooltip for the single values within the chart is displayed.

For <Tooltip> the general attributes (see above) can be defined.

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 above example leads to the following diagrams: