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 KPI Card displays a single key business metric at a glance, such as overdue tasks, total revenue, or active users. It supports conditional formatting alerts, as well as YoY and PtPP comparisons by year, quarter, month, week, or day.
Example 1: Use KPI Cards to separately display the number of overdue tasks in a project, the number of tasks in each status, and similar metrics.
Example 2: Display a store’s revenue for the current day and month, along with its PtPP growth.
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.
Data Comparison
Data Comparison is used to display the YoY/PtPP growth value and growth rate of a metric in a KPI Card, allowing viewers to read both the current value and its trend at the same time.
Once enabled, you need to configure Date Basis and Comparison Method. The available options for both settings are affected by the Dimension configuration described above. There are two scenarios:
1) When Dimension is empty or is not a date field
Date Basis: Determines which two time periods are compared based on the selected date. You can select any date-type field from the current data source.
Comparison Method: First select the statistical time range of the current metric, and then select the comparison value.
Statistical Time Range of Current Metric | Available Comparison Values |
Today | DoD growth value, DoD growth rate, WoW growth value/rate, MoM growth value/rate, YoY growth value/rate |
This Week | WoW growth value, WoW growth rate, YoY growth value/rate |
This Month | MoM growth value, MoM growth rate, YoY growth value/rate |
This Quarter | QoQ growth value, QoQ growth rate, YoY growth value/rate |
This Year | YoY growth value, YoY growth rate |
2) When Dimension is a date field
Date Basis: Automatically uses the date field selected for the current Dimension and cannot be changed manually. To change it, modify the Dimension field first.
Comparison Method: First select the statistical time range of the current metric (A), and then select the comparison value. However, A is affected by the aggregation granularity of the date field used as the Dimension, as shown below:
Dimension Aggregation Granularity | Available Statistical Time Range of Metric | Available Comparison Values |
Day | Today | DoD growth value, DoD growth rate, WoW growth value/rate, MoM growth value/rate, YoY growth value/rate |
Week | This Week | WoW growth value, WoW growth rate, YoY growth value/rate |
Month | This Month | MoM growth value, MoM growth rate, YoY growth value/rate |
Quarter | This Quarter | QoQ growth value, QoQ growth rate, YoY growth value/rate |
Year | This Year | YoY growth value, YoY growth rate |
Note: When the aggregation granularity of the Dimension date field is Year-Month-Day Hour or Year-Month-Day Hour:min, Comparison Method is not supported.
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 |