[OutSystems Charts] How to let end-users select a page region and dynamically render an OutSystems Chart?

minjung yuk

Question

Application Type

Reactive

Hi,

I’d like to build a “user-configurable chart” feature in OutSystems (Reactive Web / O11).

Requirements:

The user selects a specific section/area of the page (a predefined placeholder/region).
When the section is selected, a popup/modal opens.
In the popup, the user chooses:
- which dataset to display, and
- which chart type/style to use (from OutSystems Charts).
After clicking Confirm, the selected chart is rendered in that section using the chosen dataset.

Questions:

Is this pattern feasible with OutSystems’ standard components (especially OutSystems Charts)?
Any best practices for storing the user selection (dataset + chart type) and reloading it on page refresh?

Thanks!

30 Dec 2025

Bhanu Pratap

Use a list variableChartConfigs (structure with fields: RegionId, DatasetId, ChartType).
Persist with Local Storage: On screen ready, load via JavaScript; on save, stringify and store.
Regions: Create fixed containers (or a reusable Web Block with RegionId input). On click: Set a variable for selected region, show popup.
Inside each region: Place one Chart widget (e.g., base as Line Chart).
- Bind data series to the selected dataset (via aggregate or expression).
- Dynamically set type via AdvancedFormat > HighchartsJSON: {"chart": {"type": " + Config.ChartType + "}} (Use expression, escaping quotes properly; default to "line" if empty.)
Popup: Dropdowns for datasets and types (line, bar, pie, etc.). On confirm, update configs list and save.
No config yet? Use an If widget to show "Click to configure".

31 Dec 2025

2 replies

Last reply 02 Jan

Show thread

Hide thread

Shingo Lam

Nice and clear guideline.

02 Jan

Bhanu Pratap

02 Jan

Shingo Lam

The 2 main points is to dynamically:

pick the data from database:
- it can only be achieved by Advanced query.
- in System, you can find the Espace_Entity, Entity, Entity_Attr and Entity_Record, etc which can be used to compose the dynamic SQL query for your chart.
load the chart from advanced JSON for each chart type which is mentioned by @Bhanu Pratap

02 Jan

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.