Chart Common

Common concepts and tips for charts

Data Processing in Charts

Dimensions and Metrics

Chart data aggregation uses the concepts of dimensions and metrics.

• Dimension: Values used to group data. Categories, dates, etc. - determines "what to group by"

• Metric: Aggregated numerical values. Sums, averages, counts, etc. - determines "what to measure"

In SQL terms, dimensions correspond to columns used in GROUP BY, while metrics correspond to columns calculated using aggregate functions like SUM() or COUNT().

Date Field Transformation (Truncate/Extract)

When selecting a date column for dimension fields in charts (X-axis, grouping, etc.), you can transform the date before using it.

• Configuration Method

  • In the chart edit screen "Basic Settings", select a date column and click "Edit". Choose the transformation mode and transformation unit.

• Transformation Modes

  • Truncate: Truncates the date to the specified unit

    • Example: 2025-01-15 truncated to MONTH → 2025-01-01

    • Use case: Monthly, weekly, or yearly aggregation

  • Extract: Extracts only a specific part from the date

    • Example: Extracting DAY from 2025-01-15 → 15

    • Use case: Pattern analysis by day within a month, time period analysis (same days from different months are aggregated)

In-memory Processing

When the query result for chart data processing is within 1,000 rows and no custom SQL is used, equivalent processing is performed in the user's browser without issuing a new query.

This is called "in-memory processing". You can disable it from the chart's "Basic" > "Disable in-memory processing".

Tips

Value Formatting

By default, the format of values and labels displayed in charts is optimized according to your account's language settings. You can also change the formatter via the chart's "Advanced Settings." If a formatter is manually changed, the specific formatter settings will take precedence over the language settings.

Configuration Examples

For example, in the case of an XY Chart, you can specify formatters as follows:

• X-axis/Y-axis Label Format

  • Specify via "Advanced" > "X Axis / Y Axis" > "Value formatter"

• Tooltip Format

  • Specify via "Advanced" > "Series" > "(Series Name)" > "Value formatter"

• Value Label Format (if "Value label" are enabled)

  • Specify via "Advanced" > "Series" > "(Series Name)" > "Value label" > "Value label formatter"

Number Formatter

The number formatter uses d3-format syntax for formatting.

For example, you can specify settings as shown below:

Setting Value	Value	Format Result
.0f	12345.6789	12346
,.1r	12345.6789	10,000
-.1%	0.5	50%

Additionally, you can enclose the d3-format syntax in { and } to add prefixes or suffixes before or after the value. (Note: This is a custom extension, not standard d3-format syntax. Please refer to the examples below.)

Setting Value	Value	Format Result
{,d} USD	12345.6	12,346 USD
Approx. {,d}%	50	Approx. 50%

Date Formatter

The date formatter uses Day.js syntax for formatting. (In some cases, you can toggle between the Number Formatter and Date Formatter using the button on the left edge of the input field.)

For example, you can specify settings as shown below:

Setting Value	Date	Format Result
YYYY-MM-DD	2025-01-01	2025-01-01
YY/M/D	2025-01-01	25/1/1
MMMM YYYY	2025-01-01	January 2025

Adjusting Axis Label Display Width

You can limit the display width of labels for each axis by setting the maximum width (px) of axis labels.

Enter a numeric value (e.g., 100, 200) in the chart settings screen "Advanced" > "Axis label max size(px)". This can be useful when you want to display long label text with ellipsis.