Skip to main content

Chart components

Last updated 10/05/2026

A chart component is a component on a page that you use to build and display data charts.

To add a chart component, follow the steps for adding components.

Configure a chart​

The configuration panel for chart components is to the right of the page canvas. When you click to select a chart component, its configuration expands automatically.

Chart component configuration consists of data configuration and style configuration.

Select a sheet​

Before you start configuring data, select the sheet that the chart component will use.

You can use sheets whose status is Available.

You can also change the selected sheet later while editing. After you change the sheet, any data configuration you've completed is cleared.

After you select a sheet, the configuration panel shows all fields in the sheet that can be used to configure the chart.

Field types supported for chart configuration are string, number, date, time, and Boolean. Fields of other, unsupported types don't appear in the chart configuration panel.

Data configuration​

Data configuration for a chart component includes:

  • Dimensions: How the data is categorized. Dimensions determine how the chart breaks down the data (for example, viewing by Date, Channel, or Country).
  • Metrics: The data values you want to observe, representing the specific quantitative results you're looking at (for example, Sum of clicks or Average of retention rate).
  • Filters: Set conditions to exclude or filter data so that only a specific subset is kept.
  • Sorting: The rules for ordering data, which determine the order of items in the chart.

For dimensions, metrics, and filters, you can select multiple fields at once and drag them in.

When the chart renders, the data in the sheet is aggregated again according to the data configuration.

Configure dimensions (sub-dimensions)​

Fields of any type can be used as dimensions. You can drag fields from the right into the dimension area

Select a single dimension field to perform the following actions on it:

  • Hide: Available only for tables. A hidden dimension field is still used in calculations but isn't displayed in the table
  • Edit Field: Changes the display name in the chart. It doesn't affect the field name in the sheet
  • Remove: Removes the field

Configure metrics​

Fields of any type can be used as metrics. You can drag fields from the right into the metric area

Select a single metric field to perform the following actions on it:

  • Aggregate by: Supports Sum, Average, Count, Count Distinct, Max., and Min.
  • Number Format: Supports rounding to a whole number, changing decimal places, changing percentage decimal places, and custom formats
  • Hide: Available only for tables. A hidden metric field is still used in calculations but isn't displayed in the table
  • Edit Field: Changes the display name in the chart. It doesn't affect the field name in the sheet
  • Remove: Removes the field

Besides aggregating a single field, you can add custom metrics for formula-based calculations such as retention rate and revenue per user. For details, see Custom metrics. If public metrics are already configured, you can also use them directly.

Configure filters​

Fields of any type can be used as filters.

Filter results apply only to the chart being configured. Other charts that use the same sheet aren't affected.

Select a single filter field to perform the following actions on it:

  • Filter Settings: Configure filter rules. You can also set the filter field as an In-Chart Filter.

    • When set as an In-Chart Filter, the field is displayed above the chart, and viewers can adjust the filter rules to suit their own needs.
    • The default filter rules are the ones the editor configures in the configuration panel.
    • If no filter rules are configured, the filter on the field doesn't take effect.

  • Edit Field: Changes the display name in the chart. It doesn't affect the field name in the sheet

  • Remove: Removes the field

Configure sorting​

Only dimensions and metrics that have already been added can be selected for sorting.

When there are multiple sort items, the data is first sorted by the sort items in order, and the sorted data is then used to render and display the chart.

Numeric sort items can be sorted in ascending or descending order. Non-numeric sort items can be sorted alphabetically.

When a metric is added to sorting, the data is sorted by the metric's calculated result.

Style configuration​

Use style configuration to customize how the chart is displayed. The available style settings vary by chart type. For details, see the chart types below.

Chart types​

Table​

In data configuration, you must configure at least one metric. Dimensions, filters, and sorting are optional.

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart
  • Text Alignment: Set the alignment of the header, dimensions, and metrics in the table
  • Table Style: Choose from three header and alternating-row styles
  • Rows per Page: Choose how many rows to display on a single page. If the data has more rows than fit on one page, pagination options appear
  • NULL Value Display: Displays NULL values in the sheet according to your settings
  • Appearance: Set the background color, border color, and border width of this component

Pivot table​

In data configuration, you must configure at least one metric. Row dimensions, column dimensions, filters, and sorting are optional.

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart
  • Text Alignment: Set the alignment of the header, dimensions, and metrics in the table
  • Table Style: Choose from three header and alternating-row styles
  • Rows per Page: Choose how many rows to display on a single page. If the data has more rows than fit on one page, pagination options appear
  • NULL Value Display: Displays NULL values in the sheet according to your settings
  • Show Totals: Choose to show Row Total and Column Total
  • Appearance: Set the background color, border color, and border width of this component

Line chart​

In data configuration, you must configure at least one metric. Dimensions, sub-dimensions, filters, and sorting are optional.

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart
  • Metric Settings: When there are multiple metrics, set smooth or linear lines and the line width for each metric
  • Axis: Set whether to show the axes and the label interval. For the X-axis, you can set the label angle; for the Y-axis, you can set the maximum and minimum values
  • Display Limit: Configure the maximum number of dimension values on the X-axis when the line chart renders, and the maximum number of sub-dimension values, which determines the number of lines
  • Missing Data: Set how the line chart renders when a dimension value exists but the corresponding metric has no calculated value
  • Appearance: Set the background color, border color, and border width of this component

Metric card​

In data configuration, you must configure at least one metric. Dimensions and filters are optional.

When multiple metrics are configured, they're displayed side by side. When a dimension is configured, the metric values are shown for each dimension value.

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart
  • Alignment: The alignment you set applies to all dimension values, metric values, and metric names
  • Display: When the metric card has a dimension, set the maximum number of dimension values per row. Any beyond that wrap to the next row
  • Metric Style: Show metric names, and configure the font color and size of metric names and metric values
  • Dimension Style: When a dimension is configured, set the font color and size of dimension names, and the maximum total number of dimension values to display
  • NULL Value Display: Displays NULL values in the sheet according to your settings
  • Appearance: Set the background color, border color, and border width of this component

Progress chart​

Progress bars, circular progress bars, liquid fill charts, and gauge charts.

In data configuration, you must configure at least one metric and one target value. Filters are optional.

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart
  • Current Value/Target Value: Adjust the color, font size, and position of the current value and target value text.
  • Metric Style: Adjust the color, font size, and decimal places of the metric name and percentage text.
  • Progress Bar/Liquid Fill/Gauge Style: Adjust the component's mode, opacity, and outer ring width.
  • Color Settings: Adjust the component's colors.
  • Appearance: Set the background color, border color, and border width of this component

Bar chart​

Stacked bar charts and percent stacked bar charts have the same settings as bar charts.

In data configuration, you must configure at least one metric. Dimensions, sub-dimensions, filters, and sorting are optional.

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart
  • Bar Style: Set the bar border and the bar corner radius
  • Chart Switch: Switch between horizontal and vertical bar charts, and between stacked and percent stacked bar charts
  • Axis: Set whether to show the axes and the label interval. For the X-axis, you can set the label angle; for the Y-axis, you can set the maximum and minimum values
  • Display Limit: Configure the maximum number of dimension values on the X-axis when the bar chart renders, and the maximum number of sub-dimension values
  • Appearance: Set the background color, border color, and border width of this component

Pie chart​

In data configuration, you must configure a Dimension (as the sector categories) and a Metric (as the sector proportions). Groups, colors, sizes, and filters are optional. Sorting isn't supported (pie charts have no sort logic)

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart

  • Plot Area: Specify colors for dimension values and set the fill opacity (default 85%)

  • Axis

    • Sectors: Affects the number of sectors shown in the pie chart. Data for dimension values beyond this number is aggregated into Others
    • Sector Radius: Affects the size of the pie chart
    • Inner Radius: Affects the size of the blank area in the middle (turning the pie into a ring). Default is 0
    • Inner Stroke: Adds a stroke to the sectors

  • Tags

    • Show Labels: Shown by default; you can turn it off
    • When turned on, you can also configure whether to show dimensions, metrics, and percentages

  • Legend

    • Show Legend: Shown by default; you can turn it off
    • Position: Top, Bottom (default), Left, Right
    • Alignment: Left (default), Center, Right

  • NULL Value Display: Displays NULL values in the sheet according to your settings

  • Appearance: Set the background color, border color, and border width of this component

Scatter/bubble chart​

In data configuration, you must configure X-axis and Y-axis metrics and Groups. Size and filters are optional. Sorting isn't supported.

Style configuration includes the following:

  • Chart Title: When turned on, the chart's title is displayed above the chart

  • Plot Area: Specify colors for dimension values and set the fill opacity (default 85%)

  • Axis: Set whether to show the axes and the label interval. For the X-axis, you can set the label angle; for the Y-axis, you can set the maximum and minimum values

  • Gridlines: Controls whether gridlines are shown on the chart

  • Legend

    • Show Legend: Shown by default; you can turn it off
    • Position: Top, Bottom (default), Left, Right
    • Alignment: Left (default), Center, Right

  • NULL Value Display: Displays NULL values in the sheet according to your settings

  • Appearance: Set the background color, border color, and border width of this component

Dual-axis combo chart​

In data configuration, you must configure a main axis metric or a sub axis metric. Dimensions, sub-dimensions, filters, and sorting are optional.

Style settings specific to dual-axis combo charts include the following:

  • Chart Switch: Set the chart type separately for the main axis and the sub axis. Supported types are bar chart, stacked bar chart, percent stacked bar chart, and line chart
  • Line Style: Same as the line chart settings
  • Bar Style: Same as the bar chart settings
Was this page helpful?
On this page