Chart components on custom detail pages let you pull data from any form within your app and present it as dynamic, multi-dimensional visualizations — KPIs, breakdowns, trends, distributions — right alongside the business record you're viewing. No more jumping between pages to check stats and then back to act on them; everything lives in one view.
This guide walks through each chart type, how to configure it, and which one to pick for your scenario.
Use Cases
Scenario | What You'd Show |
CRM | A customer's order-value trend over the past year, or purchase share by product line — so the sales rep can size up potential and preference on the spot. |
Project Management | Task completion-status distribution for the current project, or daily hours invested — helping PMs spot progress risks without opening a separate dashboard. |
Equipment Management | Fault-count trend and repair-time changes over the past year, or breakdown-type distribution — giving maintenance teams a health snapshot and early warnings. |
The key benefit: members see the full statistical picture in context — right on the detail page of whatever record they're working with.
How to Add a Chart?
On the custom detail page, click Add Component, switch to the Charts tab, and pick a type. You can also scroll down in the full component list to find chart types.
Common Settings
Every chart shares these base configurations. Set them up first, then fine-tune the specific chart type.
Data Source
Pick one of two options:
Related Form: Records associated with the current record in the specified related form.
Other forms within the same app: All records in the specified form.
Data Filtering
On top of the source, add filter conditions to narrow what the chart counts and displays. Click Add Filter Condition and set your criteria — date ranges, status values, field thresholds, etc.
Data Permissions
This controls how much of the computed result a member can see:
Permission Level | Behavior |
Same permissions as Source Form | Members only see aggregated results derived from records they already have view access to in the source form. |
Full access to all form data (default) | Everyone sees the full aggregate, regardless of their individual form-level view permissions. Choose this when you want a single, shared picture — team KPIs, org-wide totals, etc. |
Styling (Optional)
Select the chart, then open the Style tab on the right:
Component Style: Two styles are supported:
Card: The component has an independent card container at the bottom, which highlights the component and supports customizing the card background.
Borderless: No additional container such as a card is added. The component content blends into the page for a seamless embedded effect.
Background: A solid color or image background is supported.
Chart Types
KPI Card
A single-value card that puts a key metric front and center. Ideal for "at a glance" numbers — overdue tasks, total revenue, active users.
Dimensions & Metrics
Field | Rules |
Dimension | 0 or 1. With 0, the card shows one aggregate number. With 1, it breaks that number out by category (e.g., task count by status: To Do · In Progress · Done). |
Metric | Exactly 1. The number the card displays. |
Conditional Formatting
Make the value change color when it crosses a threshold — turn red when overdue tasks exceed 5, for instance. Click Set to add conditions; each one specifies a threshold and a color.
Display Options
After completing the configuration above, you can set the display style of the KPI Card as needed, including:
Data display: If a dimension is added to the KPI Card, you can set it to display only the data of the top N categories in that dimension.
Color: Customize the default color of the KPI Card. If the current value meets a conditional formatting rule, the conditional formatting rule takes priority.
Font size: Small, medium, and large sizes are supported.
Bar Chart (Vertical)
Column charts — compare values across categories by height. Best when you need to spot the biggest, the smallest, and the ranking in between.
Dimensions & Metrics
Field | Rules |
Dimension | 1 or 2. One dimension → bars grouped by that field's values. Two dimensions → the first sets major groups, the second subdivides each group. |
Metric | With 1 dimension: 1 or more metrics (multi-metric bars sit side by side). With 2 dimensions: exactly 1 metric. |
Bar Chart Variants
Variant | What It Shows | Dimension | Metric |
General | Each metric gets its own set of bars. | 1 or 2 | ≥1 (if 1 dim) · 1 (if 2 dim) |
Stacked | Multiple metrics stack within one bar per category — total plus composition. | 1 | ≥2 |
100% Stacked | Same stacking shape, but every bar is scaled to 100% — pure proportion, not magnitude. | 1 | ≥2 |
Display Options
NO. | Setting | Details |
1 | X-axis | Show label text: After selected, the names of each category in the dimension are displayed on the X-axis. |
2 | Y-axis | Title: Customize the Y-axis name, such as “Sales/Units”. Value range: Set the minimum and maximum values to fix the coordinate range. Show label text: Control whether scale values are displayed |
3 | Data display | Show only the top N categories by metric value (e.g., top 10 departments by revenue). Available only with 1 dimension. |
4 | Data label | Show the exact number above each bar. |
5 | Legend | Identify what each color represents. |
Bar Chart (Horizontal)
A horizontal version of the vertical bar chart — bars extend left-to-right. Use it when category labels are long or when ranking by magnitude feels more natural on a horizontal axis.
Dimensions & Metrics
Field | Rules |
Dimension | 1 or 2. One dimension → horizontal bars by that field. Two dimensions → major groups on the Y-axis, sub-groups inside each bar. |
Metric | With 1 dimension: 1 or more. With 2 dimensions: exactly 1. |
Horizontal Bar Variants
Variant | What It Shows | Dimension | Metric |
General | Each metric gets its own set of bars. | 1 or 2 | ≥1 (if 1 dim) · 1 (if 2 dim) |
Stacked | Multiple metrics stack within one bar per category — total plus composition. | 1 | ≥2 |
100% Stacked | Same shape, normalized to 100% — proportion only. | 1 | ≥2 |
Display Options
No. | Setting | Details |
1 | Y-axis | Title: Customize the Y-axis name, such as “Sales/Units”. Value range: Set the minimum and maximum values to fix the coordinate range. Show label text: Control whether scale values are displayed. |
2 | Data display | Top N categories (1 dimension only). |
3 | Data label | Show the value at the end of each bar. |
4 | Legend | Color-key for metrics or dimension values. |
Line Chart
Connects data points with lines to reveal trends, cycles, and shifts over an ordered dimension (usually time). Supports multiple lines for side-by-side comparison.
Dimensions & Metrics
Field | Rules |
Dimension | 1 or 2. Sets the X-axis sequence — how many data points appear and how they're grouped. |
Metric | With 1 dimension: 1 or more (each metric = one line). With 2 dimensions: exactly 1. |
Display Options
No. | Setting | Details |
1 | Line style | Line shape: Standard and curved lines are supported. Data point: After selected, a circular marker is displayed at each data point for easier positioning. |
2 | X-axis | Show label text: Control whether dimension names, such as dates or months, are displayed. |
3 | Y-axis | Title: Customize the Y-axis name, such as “Sales Amount/10K”. Value range: Set the minimum and maximum values to fix the coordinate range. Show label text: Control whether scale values are displayed. |
4 | Data display | Top N categories (1 dimension only) — e.g., "most recent 12 months." |
5 | Data labels | Print the value next to each point. |
6 | Legend | Identify each line when multiple metrics are plotted. |
Area Chart
A line chart with the region between the line and the X-axis filled in. It communicates volume as well as direction — useful when you care about both the trend and the sheer scale underneath it.
Dimensions & Metrics
After completing the common configuration, you can add dimension and metric fields as needed:
Field | Rules |
Dimension | Determines the data point sequence on the horizontal axis, namely the X-axis, and how many data points are displayed. You can add 1 to 2 dimensions. |
Metric | Determines the vertical height of data points and the magnitude of the filled area.When there is 1 dimension, you can add one or more metrics.When there are 2 dimensions, only 1 metric can be added. |
Display Options
No. | Setting | Details |
1 | Line style | Standard and curved lines are supported.
|
2 | X-axis | Show label text: Control whether dimension names, such as dates or months, are displayed. |
3 | Y-axis | Title: Customize the Y-axis name, such as “Sales/Units”. Value range: Set the minimum and maximum values to fix the coordinate range. Show label text: Control whether scale values are displayed. |
4 | Data display | Top N categories (1 dimension only). |
5 | Data labels | Values at each point. |
6 | Legend | Color-key when multiple areas overlap. |
Pie Chart
Divides a circle into slices to show how each category contributes to the whole. Fastest way to answer "what's the biggest share?" — but less effective when you need precise comparisons between close values.
Dimensions & Metrics
Field | Rules |
Dimension | Exactly 1. Each unique value becomes one slice. |
Metric | Exactly 1. Determines slice size. |
Pie Variants
The Pie Chart provides the following three display types:
Solid
Thick Donut
Thin Donut
Display Options
Setting | Details |
Data display | Top N slices only (e.g., Top 5); remaining values collapse into "Other." |
Data labels | You can choose to display the following content: Dimension values: Displays category names, such as “Urgent” and “Medium”. Value: Displays specific values, such as “18”. Percentage: Displays the proportion, such as “37.5%”. |
Legend | Color-key for each slice. |
Chart Operations
Switching Chart Type
Already placed a chart but want a different visualization? Select the chart and click the type-switcher in the upper-right corner. The system automatically filters out types that don't match your current dimension/metric count (incompatible options appear grayed out).
Refreshing and Enlarging Charts
When viewing a chart on a Custom Detail Page, hover over the chart and click the Refresh button in the upper-right corner to load the latest data. You can also click Enlarge to view the chart in an enlarged view, as shown below.
Quick Reference: Which Chart for Which Question?
Question | Chart |
"What's the raw number right now?" | Indicator Card |
"Who's the biggest / smallest, and how do they rank?" | Bar Chart (vertical or horizontal) |
"How is this trending over time?" | Line Chart |
"How is this trending — and how big is it?" | Area Chart |
"What share does each category hold?" | Pie Chart |
"Composition inside a total?" | Stacked Bar / 100% Stacked Bar |