Line chart | X4Documentation

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.

Instructions for use

A line chart is created using the <Line> element within the <Chart> element. The element can only be used in the layout of a Detail Component.

XML

<Chart>
    <Line/>
</Chart>

The <Line> element can include the following elements:

<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.

Attribute

You can define the following attributes 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. 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: 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` or `120%` Keywords, e.g. `small` or `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 a color for the foreground (text, etc.) of the control. Note: 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.

`<Line>` element

Contains all the elements that belong to the line chart.

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

Attribute	Description
`legend`	Specifies whether to display a legend. Possible values: `true` (default) `false`

Attribute

Description

legend

Specifies whether to display a legend.

Possible values:

true (default)
false

`<Axis>` element

Child element of <Line> . Defines the axis labels.

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

Attribute	Description
`color`	Defines the color of the axes. 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.
`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>` element

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, you can define the following attributes for the <LineData> element:

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` (default) `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>` element

Child element of <Line> . 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="List1" type="List">
        <Property name="Year" type="Integer"/>
        <Property name="Sales" type="Integer"/>
    </Property>
    <Property name="List2" type="List">
        <Property name="Year" type="Integer"/>
        <Property name="Sales" type="Integer"/>
    </Property>
</Properties>
	...
<Chart title="Trend 1">
    <Line legend="true">
        <Axis verticalMin="0" verticalMax="300000" verticalLabel="Sales" horizontalLabel="Year"/>
        <LineData color="A700" xValues="#Year" data="#List1" yValues="#Sales" name="Seller 1"/>
    </Line>
</Chart>
</Cell>
<Cell cellSizeDesktop="6">
    <Chart title="Trend 1 and 2">
        <Line legend="true">
            <LineData color="A700" xValues="#Year" data="#List1" yValues="#Sales" name="Seller 1" marker="pin"/>
            <LineData color="400" xValues="#Year" data="#List2" yValues="#Sales" name="Seller 2" marker="pin"/>
        </Line>
    </Chart>

Output

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

XML

<Ok>
	<List1>
		<Year>2018</Year>
		<Sales>50000</Sales>
	</List1>
	<List1>
		<Year>2019</Year>
		<Sales>100000</Sales>
	</List1>
	<List1>
		<Year>2020</Year>
		<Sales>40000</Sales>
	</List1>
	<List1>
		<Year>2021</Year>
		<Sales>150000</Sales>
	</List1>
	<List1>
		<Year>2022</Year>
		<Sales>250000</Sales>
	</List1>
	
	<List2>
		<Year>2017</Year>
		<Sales>200000</Sales>
	</List2>
	<List2>
		<Year>2018</Year>
		<Sales>250000</Sales>
	</List2>
	<List2>
		<Year>2019</Year>
		<Sales>150000</Sales>
	</List2>
	<List2>
		<Year>2020</Year>
		<Sales>20000</Sales>
	</List2>
</Ok>

Instructions for use

Attribute

<Line> element

<Axis> element

<LineData> element

<Tooltip> element

Example

`<Line>` element

`<Axis>` element

`<LineData>` element

`<Tooltip>` element