X4 Help Center
X4 Help Center
Breadcrumbs

Line chart

A line chart can be used to display trends or changes over time. Data points are connected by straight line segments. Multiple series of numbers can also be displayed in a line chart.

A line chart can contain the following elements:

  • <Line> : Contains all the elements that belong to the line chart.

  • <Axis> : Defines the axis labels.

  • <LineData> : Defines how the data are displayed. A <LineData> element must be defined for each data record, that is, each line in the line chart.

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

Line

<Line> : Contains all the elements that belong to the line chart.

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

Attribute

Description

legend

Specifies whether to display a legend.

Possible values: true (default) / false

Axis

<Axis> : Child element of <Line> . 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

horizontalLabel

Defines the label of the x-axis.

Possible values: Any string

horizontalMax

Maximum value of the x-axis

Possible values: Integer

horizontalMin

Minimum value of the x-axis

Possible values: Integer

horizontalUnits

Unit of the x-axis

Possible values: Integer

verticalLabel

Defines the label of the y-axis.

Possible values: Any string

verticalMax

Maximum value of the y-axis

Possible values: Integer

verticalMin

Minimum value of the y-axis

Possible values: Integer

verticalUnits

Unit of the y-axis

Possible values: Integer

LineData

<LineData> : Child element of <Line> . Defines how the data are displayed. A <LineData> element must be defined for each data record, that is, each line in the line chart.

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

Attribute

Description

color

Defines the color of the line.

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.

Possible values: Data binding possible

labels

Specifies whether the data points are labeled with the respective value.

Possible values: true / false (default)

marker

Specifies how a data point is represented.

Possible values:

  • circle: Circle

  • rect: Rectangle

  • roundRect: Rectangle with rounded corners

  • triangle: Triangle

  • diamond: Hash/diamond shape

  • pin: Pin

  • arrow: Arrow

  • None: No marker

markersEnabled

Defines whether data points are marked.

Possible values: true / false

name

Name of the data record displayed in the legend.

Possible values: Any string

xValues

Specifies which data is displayed in the chart on the x-axis. The specified string refers to a defined property in the provided data.

Possible values: Data binding possible

yValues

Specifies which data is displayed in the chart on the y-axis. The specified string refers to a defined property in the provided data.

Possible values: Data binding possible

Tooltip

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

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

Examples of line charts

Example 1:
XML
<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="Profit" type="List">
			<Property name="Years" type="Integer"/>
			<Property name="Money" type="Integer"/>
		</Property>
	</Property>
</Properties>
<FlowLayout>
	<Chart  fontFamily="Font01" title="Profit over 25 Years">
		<Line fontSize="medium" fontStyle="normal" fontFamily="Font02" fontWeight="Black" foreground="A700" legend="true">
			<Tooltip fontFamily="Font01" fontSize="30"/>
			<Axis fontFamily="Font03" horizontalLabel="Years" verticalLabel="Euro"/>
			<LineData data="#DataSource.Profit" labels="true" name="Profit" xValues="#Years" yValues="#Money"/>
		</Line>
	</Chart>
</FlowLayout>


Output format of the process


Sample1.png


Example 2:
XML
<Property name="Datasource" type="Complex">
    <Property name="LineDataSet1" type="List">
        <Property name="xValue" type="Integer"/>
        <Property name="yValue" type="Integer"/>
    </Property>
    <Property name="LineDataSet2" type="List">
        <Property name="xValue" type="Integer"/>
        <Property name="yValue" type="Integer"/>
    </Property>
</Property>
	...
<Chart title="Some data">
    <Line>
        <Axis horizontalLabel="D, mm" verticalLabel="L, s" />
        <LineData data="#Datasource.LineDataSet1" xValues="#xValue"
            yValues="#yValue" name="Series 1" marker="diamond" labels="true" />
        <LineData data="#Datasource.LineDataSet2" xValues="#xValue"
            yValues="#yValue" name="Series 2" marker="pin" />
    </Line>
</Chart>

The LineData element is used to represent a line in the chart. The displayed data itself is contained in the Datasource property. In the example above, the data is retrieved using the data binding expression #Datasource.LineDataSet1.


Output format of the process


The example above results in the following chart:

LineChart.png