Skip to main content

Number Chart

A number chart displays one or more numbers, optionally with the delta to another (e.g. previous) value.

image-400 image-400

Data Requirements​

The Number chart is available if the query result has one or two rows of data, each with 1-8 numerical columns. The values in the first row are interpreted as the "current" values and the values in the (optional) second row are interpreted as the "previous" values. For example, a query result such as

ab
342
543

produces the following number chart (with default configuration)

image-400 image-400

Interactive Features​

When hovering with the cursor over a number chart, the current and previous value (if present) are shown in a tooltip. The labels used in the tooltip can originate from another result column, see Configuration.

image-200 image-200

If configured with a drill-down, clicking on the current value or the delta can result in settings a filter value on the same or a different dashboard.

A value can be displayed as a clickable link by formatting its column as HTML and returning an anchor tag from your query — useful for linking a metric to a related dashboard, record or external page.

Link in a number chart Link in a number chart

For example, setting a column's format to HTML (see Settings) and returning '<a href="https://example.com/dashboard" target="_blank" rel="noopener noreferrer">Open dashboard</a>' renders Open dashboard as a link that opens in a new tab. The markup is rendered exactly as written, so include attributes such as target="_blank" and rel="noopener noreferrer" yourself — the Table chart adds these automatically when it detects links in Text columns.

Configuration​

The Number chart configuration has the following general options:

Number Chart Config Number Chart Config

  • S, M, L, XL: Preset sizes for the numbers shown.
  • Horizontal, Vertical: If multiple numbers (i.e. multiple rows) are shown, they can be either horizontally or vertically aligned.
  • Classic, Modern: Display style for the chart (see Display Style).
  • Chart Alignment: Whether the entire chart should be left-aligned, centered or right-aligned.
  • Display Title: Whether the column names should be shown as titles above the numbers.
  • Human Column Titles: Whether the titles, if shown, should use human-friendly capitalization.

Display Style​

The Number chart supports two display styles:

  • Classic: The original styling, used by all existing charts. Delta colors use the dashboard color scheme, and drill-down hover uses a box-shadow underline effect.
  • Modern: Updated typography with bolder values, lighter titles, and smaller delta text. Delta colors use more prominent green (#34A853) and red (#DB4437). Drill-down hover uses a subtle scale animation with a text-decoration underline.

All newly created Number charts default to the Modern style. Existing charts are unaffected and remain in Classic style unless manually switched.

Settings​

In the Settings section the formatting of the numeric columns (and deltas, if a previous value exists) is configured. Note that you can choose to hide result columns that are not intended to be shown but e.g. used in a drill-down or conditional formatting.

image-300 image-300

If a result column that is hidden (by choosing the - option), the Use label as tooltip option is available. If enabled, the values of that column are used as the tooltip labels rather than the default labels Current value and Previous value.

Drill-Down​

A drill-down action on a number chart can be used to apply a value (typically the shown number, but any result column can be used) as a filter value on the same or a different dashboard when selected, thus making the number chart an interactive filter control.

image-300 image-300

Conditional Formatting​

The Conditional Format section allows configuring formatting rules for the numbers shown based on conditions on any result column.

image-300 image-300