Line Chart | X4Documentation

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

A line chart can contain the following elements:

<Line>: Contains all elements that belong to the line chart.
<Axis>: Defines the axis labels.
<LineData>: Defines how the data is displayed. For each data set, i.e. each line in the line chart, a <LineData> element must be defined.
<Tooltip>: 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 line 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` Keywords: `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 font weight 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`

Line

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

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

Attribute	Description
`legend`	Defines if a legend is displayed. Possible values: `true` (default) / `false`

Attribute

Description

legend

Defines if a legend is displayed.

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 axis color 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 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 is displayed. For each data set, i.e. each line in the line chart, a <LineData> element must be defined.

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

Attribute	Description
`color`	Defines the line color. 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. Possible values: Data Binding
`labels`	Defines if the data points are labeled with the respective value. Possible values: `true` / `false` (default)
`marker`	Defines how a data point is displayed. Possible values: `circle`: Circle `rect`: Rectangle `roundRect`: Rectangle with rounded corners `triangle`: Triangle `diamond`: Diamond `pin`: Pin `arrow`: Arrow `none`: No marker
`markersEnabled`	Defines if a data point is marked. Possible values: `true` / `false`
`name`	Name of the data set that is displayed in the legend. Possible values: Any string
`xValues`	Defines which data is displayed in the diagram on the x-axis. The specified string refers to a defined property within the data that is specified for `data`. Possible values: Data Binding
`yValues`	Defines which data is displayed in the diagram on the y-axis. The specified string refers to a defined property within the data that is specified for `data`. Possible values: Data Binding

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

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

Examples

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>

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 element <LineData> is used to display a line in the diagram. The displayed data itself is contained in the property Datasource. In the above example, the data is retrieved using the data binding expression #Datasource.LineDataSet1. The above example leads to the following diagram: