Custom Chart

Tips & examples

A flexible, fully customizable dynamic chart viewport driven by a source query and custom option expressions, featuring custom color theme pickers, sorting controls, and interactive toolbox utilities (save as image, clear selection, data view table, area zoom, magic type switch).

When to use

Visualizing complex, non-standard, or highly customized multi-coordinate charts where standard chart types (bar, line, pie, scatter) do not offer sufficient option flexibility.
Configuring fully dynamic charts backed by a source query with bespoke chart option expressions, theme palettes, and interactive toolbox features.

What you need

Requires selecting a backing database query from the Source View dropdown and providing a valid chart Option expression to dictate how coordinates and series render.

Database query records rendered via custom chart option JSON expressions or custom dynamic graphing logic.

Examples

A tailored multi-axis custom chart combining bar and line series using a raw custom option expression backed by dynamic query data.
An advanced analytics visualization panel with custom background hex themes, area zooming, and image export toolbox features enabled.

Avoid

Squeezing custom chart viewports into small layout containers (under 6x6 grid units), allocate at least 6x6 grid units, expanding up to 12x12 for high-density visualizations.
Attempting to render custom charts without providing a valid Source View query or complete chart option configuration code.

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

Source query whose rows are exposed as data to the custom ECharts option expression.

View NamerequiredTextInside `dataSource`: Database view that supplies rows or form data.
Default: none

Sort

Per-field ascending/descending sort applied to the source query before it reaches the option expression.

SortoptionalList of Settings group: Configures priority ordering sequence for query result records before plotting.
Default: none

Data Display Limit

Caps the number of rows fetched from the source query.

LimitoptionalNumber: Configuration for limit.
Default: none

Filter

Fixed filter (visual rule builder or expression) applied server-side to the query backing the chart.

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

Option

Raw ECharts option expression (JSON/JS object) that defines the entire chart - series, axes, tooltip, etc. Links to the ECharts option documentation.

OptionrequiredCustom expression: Expression or object that supplies the full ECharts option for this chart.
Default: buildCustomExpressionValue(JSON.stringify(defaultOption))

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 custom chart container.

Accessibility

Renders canvas visual graphics with fallback ARIA chart roles (role='img') and accessible text descriptions. Turning on Data View allows screen reader users to consume underlying metric data in tabular format.

Expressions

Values you can read in expressions

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

elements.myCustom.<property>

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

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

data Array<object> The data rows. elements.myCustom.data

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

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

When The record behind the data 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.myCustom.selected

Replace myCustom 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
{
  "config": {
    "dataSource": {
      "viewName": "contacts"
    },
    "option": "@@expression:'value'"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "config": {
    "dataSource": {
      "viewName": "contacts"
    },
    "option": "@@expression:'value'",
    "showBackground": false,
    "filter": "@@expression:'value'",
    "sort": [
      {
        "fieldName": "fieldName",
        "asc": false
      }
    ],
    "limit": 0
  }
}

Ready-made setups

Custom Multi-Axis Query Chart ↕

Configures a 12x6 custom chart backed by a source query, controlled by custom option expressions, featuring custom hex themes and full toolbox utility controls.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "config": {
    "setup": {
      "sourceView": "getCustomMetricsQuery"
    },
    "translation": {
      "title": "Advanced Metric Trends"
    },
    "toolbox": {
      "enableSaveAsImage": true,
      "enableClearSelection": true,
      "enableDataView": true,
      "enableAreaZooming": true,
      "enableMagicType": true
    },
    "filter": {
      "filterExpression": "{\n  \"combinator\": \"AND\",\n  \"filters\": []\n}"
    },
    "option": {
      "chartOptionExpression": "@@expression: dynamicOptions.getCustomChartConfig"
    }
  }
}