X4 Help Center
X4 Help Center
Breadcrumbs

Bar Chart

A bar chart can be used to compare multiple variables to a single value. They are useful for comparing categories.


A bar chart can contain the following elements:

  • <Bar>: Contains all the elements that belong to the bar chart. Specifies how the chart should be displayed.

  • <BarData>: Defines how the data are displayed. A <BarData> element must be defined for each category in the bar chart.

  • <Axis>: Defines the axis labels.

  • <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 bar 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

Bar

<Bar> : Contains all the elements that belong to the bar chart. Specifies how the chart should be displayed.

In addition to the general attributes, <Bar> can have the folllowing attributes:

Attribute

Description

legend

Specifies whether to display a legend.

Possible values: true (default) / false

stacked

Specifies whether the bar chart should be displayed as a stacked chart.

  • Data binding (Boolean) is possible

Possible values: true / false (default)

BarData

<BarData> : Child element of <Bar> . Defines how the data are displayed. A <BarData> element must be defined for each category in the bar chart.

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

Attribute

Description

category

Specifies which category the value is assigned to.

Possible values: Data binding possible

color

Color of the bar

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 object of the data source is visualized.

Possible values: Data binding possible

name

Specifies the name of the data displayed in the legend.

Possible values: Any string or data binding

value

Specifies which value of the data object is visualized.

Possible values: Data binding possible

Axis

<Axis> : Child element of <Bar> . Defines the axis labels.

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

Attribute

Description

color

Defines the color of the axes.

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

Tooltip

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

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

Emptying data

If you reload additional data using a process, the previously loaded chart will not be removed. If you want to overwrite the previously loaded chart with the new data, the empty="true" attribute must be declared in the data. The attribute clears the existing data.

Input 1

Example 1:
XML
<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<b2 empty="true"/>
	<b1>
		<a>1</a>
		<b>1</b>
	</b1>
</Ok>

Input 2

Example 1:
XML
<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<b1 empty="true"/>
	<b2>
		<a>1</a>
		<b>1</b>
	</b2>
</Ok>

Chart in the component

Example 1:
XML
<Chart>
	<Bar>
		<BarData
			category="#a"
			data="#b1"
			value="#b" />
		<BarData
			category="#a"
			data="#b2"
			value="#b" />
	</Bar>
</Chart>

Examples

Example 1:
XML
<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="CompanyX" type="List">
			<Property name="Category" type="String"/>
			<Property name="Money" type="Integer"/>
		</Property>
		<Property name="CompanyY" type="List">
			<Property name="Category" type="String"/>
			<Property name="Money" type="Integer"/>
		</Property>
	</Property>
</Properties>
<FlowLayout>
	<Chart fontFamily="Font03" title="Profit comparison between two companies">
		<Bar stacked="true">
			<Tooltip fontFamily="Font02" fontSize="10"/>
			<Axis fontFamily="Font03" fontSize="10"/>
			<BarData category="#Category" data="#DataSource.CompanyX" fontFamily="Font03" name="Company X" value="#Money"/>
			<BarData  category="#Category" data="#DataSource.CompanyY" fontFamily="Font03" name="Company Y" value="#Money"/>
		</Bar>
	</Chart>
</FlowLayout>

The example above results in the following chart:

Bar-Sample.png
Example 2:
XML
<Property name="Datasource" type="Complex">
    <Property name="Bar1" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
    <Property name="Bar2" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
    <Property name="Bar3" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
 
	...
	...
	...
 
<Chart title="Test Bar">
    <Bar>
        <BarData data="#Datasource.Bar1" category="#category" value="#value"
            name="Data 1" />
        <BarData data="#Datasource.Bar2" category="#category" value="#value"
            name="Data 2" />
        <BarData data="#Datasource.Bar3" category="#category" value="#value"
            name="Data 3" />
    </Bar>
</Chart>
 
<Chart title="Stacked Bar">
    <Bar stacked="true">
        <BarData data="#Datasource.Bar1" category="#category" value="#value"
            name="Data 1" />
        <BarData data="#Datasource.Bar2" category="#category" value="#value"
            name="Data 2" />
        <BarData data="#Datasource.Bar3" category="#category" value="#value"
            name="Data 3" />
    </Bar>
</Chart>

The <BarData> element is used to represent a category in the chart. The displayed data itself is contained in the Datasource property. The example above results in the following chart:

BarChart.png
BarChart_Stacked.png