Line Chart

Tips & examples

A dynamic 2D line chart visualizing trend lines along X and Y coordinates, supporting multiple Y-value line series, filled area options, custom legend aliases, theme presets, and interactive toolbox tools (area zoom, image export, data view, magic type switch to bar chart).

When to use

Visualizing continuous data trends, time-series metrics, or multi-series numerical comparisons over sequential intervals.
Plotting dynamic query data along X and Y axes using lines, with support for filled area line fills, stacked lines, and value data point labels.

What you need

Requires an active Source Query. Select an ordered property for Label (X coordinate) and one or more numerical columns for Value (Y coordinate). Multiple value mappings generate multi-line trend comparisons.

Time-series database query records, ordered chronological metrics, and continuous quantitative trends plotted across two coordinates.

Examples

Squeezing line chart displays into small layout containers (under 6x6 grid units) — allocate at least 6x6 grid units, expanding to 12x12 for high-density time series.
Plotting unordered categorical string values along the X-axis where trend direction has no mathematical or chronological sequence.
Leaving raw database column keys visible in legends without providing human-readable legend aliases (e.g., using ‘year_manufactured’ instead of ‘Year Manufactured’).

Avoid

Squeezing line chart displays into small layout containers (under 6x6 grid units) — allocate at least 6x6 grid units, expanding to 12x12 for high-density time series.
Plotting unordered categorical string values along the X-axis where trend direction has no mathematical or chronological sequence.
Leaving raw database column keys visible in legends without providing human-readable legend aliases (e.g., using ‘year_manufactured’ instead of ‘Year Manufactured’).

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Setup

View NamerequiredTextInside `dataSource`: Database view that supplies rows or form data.
Default: none
Label Column NamerequiredTextInside `dataSource.columns`: Selects the query column property used for X-axis chronological or categorical labels.
Default: none
Value Column NamesrequiredList of TextInside `dataSource.columns`: Selects one or more numerical query columns for Y-axis trend values. Adding multiple values generates multi-line comparison trends.
Default: []
Hide LabeloptionalYes / no: When true, hides numeric value labels on plotted points along the line.
Default: false
Is StackedoptionalYes / no: Boolean switch stacking multi-series line values cumulatively on top of each other.
Default: none

Display Options

Hide LabeloptionalYes / no: When true, hides numeric value labels on plotted points along the line.
Default: false
Hide XaxisoptionalYes / no: When true, hides the horizontal X-axis line and tick marks.
Default: none
Hide YaxisoptionalYes / no: When true, hides the vertical Y-axis line and scale values.
Default: none
Hide AreaoptionalYes / no: When true, disables the shaded fill beneath the line (area chart mode).
Default: none

Legend Setup

PlacementoptionalOne of: top, end, bottom, start, hiddenInside `legend`

Label position relative to the input control.

Choices

top
end
bottom
start
hidden

Default: none

OrientoptionalOne of: vertical, horizontalInside `legend`

Controls the layout alignment direction of legend items.

Choices

vertical
horizontal

Default: none

Sort

SortoptionalList of Settings group: Configuration for sort.
Default: none

Data Display Limit

LimitoptionalNumber: Caps the maximum number of data points rendered along the line chart.
Default: none
X IntervaloptionalNumber or Text: Configures axis label step intervals using ‘auto’ or explicit numbers like 100 to control axis tick frequency.
Example auto
Default: none

Theme

Theme NameoptionalText: Selects predefined visual color palettes or unlocks custom color hex picker settings.
Default: none
ThemeoptionalKey-value map: Custom theme object for background, title, and legend colors when not using a named preset.
Default: none

Toolbox

ToolboxoptionalKey-value map: Toolbox buttons shown on the chart: save as image, restore, data view, area zoom, and magic type (switch to bar).
Default: none

Filter

FilteroptionalCustom expression: Row filter applied when loading data.
Example { "combinator": "AND", "filters": [] }
Default: defaultExpressionValue

Inside dataSource: (dataSource)

ColumnsrequiredSettings group: Configuration for columns.
Default: {"valueColumnNames":[],"labelColumnName":""}

Inside `sort.$item`: (Each list item) ↕

AscrequiredYes / no: Configuration for asc.
Default: none
Field NamerequiredText: Configuration for field Name.
Default: none

Sizing

Minimum size: 3 × 3 grid cells (width × height).

Translatable labels

title — Header title text displayed prominently above the line chart container.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myLineChart.<property>

loading boolean True while data is loading from the server. elements.myLineChart.loading

When True while the chart is fetching. Use it to hold back a summary figure that would otherwise flash the wrong number.

data null Current payload rows or record object. elements.myLineChart.data

error string Error message when the last operation failed. elements.myLineChart.error

selected object Currently selected row(s) in the table. elements.myLineChart.selected

When The record behind the point the user clicked. This is how you make a chart drive the rest of the page — point a table or detail panel at it to drill down. Empty until something is clicked.

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myLineChart.selected

Replace myLineChart with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "config": {
    "dataSource": {
      "viewName": "contacts",
      "columns": {
        "labelColumnName": "labelColumnName",
        "valueColumnNames": [
          "valueColumnNames"
        ]
      }
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
  "config": {
    "dataSource": {
      "viewName": "contacts",
      "columns": {
        "labelColumnName": "labelColumnName",
        "valueColumnNames": [
          "valueColumnNames"
        ]
      }
    },
    "showBackground": false,
    "isStacked": false,
    "filter": "@@expression:'value'",
    "sort": [
      {
        "fieldName": "fieldName",
        "asc": false
      }
    ],
    "limit": 0,
    "xInterval": 0,
    "toolbox": {
      "exampleKey": {
        "exampleKey": {}
      }
    },
    "themeName": "themeName",
    "theme": {
      "exampleKey": {}
    },
    "legend": {
      "placement": "top",
      "orient": "vertical"
    },
    "hideLabel": false,
    "hideLegend": false,
    "hideYAxis": false,
    "hideXAxis": false,
    "hideArea": false
  }
}

Ready-made setups

Multi-Series Time-Series Revenue Line Chart ↕

Configures a 12x6 area-shaded line chart tracking quarterly revenue versus target projections with custom legend aliases, area zooming, and magic type switching.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
  "config": {
    "setup": {
      "sourceQuery": "getQuarterlyFinancials",
      "labelProperty": "quarter_name",
      "valueProperties": [
        "actual_revenue",
        "target_revenue"
      ],
      "showValueLabels": false,
      "isStacked": false
    },
    "display_options": {
      "showLabel": true,
      "showXAxis": true,
      "showYAxis": true,
      "showArea": true
    },
    "legend_labels": {
      "legendLabelAliases": {
        "actual_revenue": "Actual Revenue",
        "target_revenue": "Target Revenue"
      }
    },
    "legend_setup": {
      "legendPlacement": "Top",
      "legendOrientation": "Horizontal"
    },
    "translation": {
      "title": "Quarterly Revenue Growth Trend"
    },
    "data_display_limit": {
      "dataLimit": "50",
      "labelInterval": "auto"
    },
    "toolbox": {
      "enableSaveAsImage": true,
      "enableClearSelection": true,
      "enableDataView": true,
      "enableAreaZooming": true,
      "enableMagicType": true
    },
    "filter": {
      "filterExpression": "{\n  \"combinator\": \"AND\",\n  \"filters\": []\n}"
    }
  }
}