Histogram
The widget displays approximate calculations as fractional counts.
The widget may produce imprecise results. Deviations in specific values are due to the behavior of the underlying ClickHouse function used for calculations. For details, refer to the ClickHouse documentation.
Widget Settings
In addition to the common widget settings, this widget has unique options.
Data Settings
You can add multiple dimensions to the widget, but only the first one in the list will be displayed. The dimension supports only columns with data types Integer, Float, Date, or DateTime. Standard dimension settings apply (see Sections and measures). The following color options are available:
- Auto
- Solid (color selected from the palette)
- By rule (rules with mode Solid or Custom are allowed)
- Custom (via formula)
Display Settings
Beyond the common display settings, the following additional options are available.
Text Size
Controls the text size in widget rows.
Limit Type
The following limit types are available:
- Numeric
- By variable
- By formula
When Numeric is selected, the Dimension limit setting defines how many dimension values are shown on the histogram.
When By variable is selected, you can choose any integer-type variable from the dropdown (e.g., Input value or a Dynamic list with data type Integer). You can also control the variable’s value—and thus the histogram display in Browse Mode—using a configured Parameter widget.
When By formula is selected, you specify a formula that determines the dimension limit.
If the variable or formula value exceeds 50, only the first 50 values are displayed on the histogram.
Dimension Limit
Controls how many dimension values are displayed on the histogram.
Hint
When enabled, hovering over a bar in Browse mode shows a hint with detailed information—for example, interval boundaries and the exact indicator value. Tooltips are also helpful when the chart contains many bars and not all labels fit beneath them.
Chart Type
This setting controls whether dimension values are displayed as bars or as lines with points.
Line Thickness
Available only when the chart type is set to lines. Options: thin or thick.
Line Smoothing
Available only for line charts. When enabled, lines appear smoother.
Orientation
The following orientation options are available:
- Auto
- Vertical
- Left-aligned
- Right-aligned
X-axis
For the X-axis, you can enable the axis itself, its title, and configure label rotation and height. The axis title is always Formula.
Y-axis
For the Y-axis, you can enable the axis, its title, and set label width. The axis title is always Quantity.
Filtering Settings
The widget supports standard filtering settings. A filter configured in the widget cannot be removed in Browse mode.
Browse Mode
In Browse mode, the widget functions like a Filter. Clicking a bar highlights it with a selection outline, and other widgets in the view update accordingly.
To select multiple values on the histogram, press and hold the left mouse button and drag from the first to the last desired bar.
You can extend the selection to include adjacent values. Move the cursor to the edge of the selected area—the cursor changes to a double-arrow icon. Press and hold the left mouse button and drag to the desired bar. This feature works only if the histogram’s filter mode is set to Standard or Single choice.
You can also move the entire selected area left or right by dragging it (bars themselves remain fixed in place). This also requires the filter mode to be Standard or Single choice.
Both extending and moving the selection work inside the filter window as well.
Boundary behavior:
- The left boundary of an interval is inclusive; the right boundary is exclusive
- The right boundary is inclusive only for the last interval
- Each bar represents a sub-interval created by dividing the full data range into equal bins, so a specific data point may or may not fall exactly on a bin boundary
- Bars with zero values in their interval are not displayed on the chart
When computing the histogram, values null, NaN, -inf, and inf are ignored and do not appear on the chart.
Widget Configuration in YAML
You can configure the widget not only in the visual editor but also in the YAML editor. The table below lists the keys and values available for configuration. For details on using the value key, refer to Dimension and measure values in YAML. Supported data formats are described on the corresponding page. General widget parameters are covered in Widget configuration in YAML.
Data Settings in YAML
| Key | Type | Description |
|---|---|---|
| title | string | Title |
| showMarkdown | boolean | Description |
| markdownText | string | Description text |
| markdownMeasures | — | Measures in description |
| dimensions | — | Dimensions |
Dimensions in YAML (key: dimensions)
| Key | Type | Description |
|---|---|---|
| name | string | Dimension name |
| value | — | Indicator formula |
| dbDataType | enum | Dimension data type |
| format | enum | Format |
| formatting | enum | Formatting |
| formattingTemplate | string | Custom formatting Only for CUSTOM formatting |
| hideEmptyValues | boolean | Hide empty values |
| hierarchyDimensions | — | Hierarchy dimensions If present, the indicator is treated as hierarchical |
| color | — | Color: - AUTO — auto- BASE — solid- FORMULA — by formula- RULE — by ruleNot applicable to hierarchical indicators |
| displayCondition | — | Display (display condition) |
| arrayNesting | boolean | Array nesting |
Hierarchical Dimension (key: hierarchyDimensions)
| Key | Type | Description |
|---|---|---|
| name | string | Dimension name |
| value | — | Dimension formula |
| dbDataType | enum | Dimension data type |
| format | enum | Format |
| formatting | enum | Formatting |
| formattingTemplate | string | Custom formatting Only for CUSTOM formatting |
| hideEmptyValues | boolean | Hide empty values |
| color | — | Color: - AUTO — auto- BASE — solid- FORMULA — by formula- RULE — by rule |
| displayCondition | — | Display (display condition) |
| arrayNesting | boolean | Array nesting |
Display Settings in YAML
| Key | Type | Description |
|---|---|---|
| paddings | string | Side paddings |
| titleSize | number | Title size |
| titleColor | — | Title color: - AUTO — auto- BASE — solid |
| titleWeight | enum | Font weight: - NORMAL — normal- BOLD — bold |
| markdownTextSize | number | Markdown description text size Specifies description text size in Markdown. Available only if Description is enabled |
| textSize | number | Text size |
| binsLimit | number | Dimension limit |
| chartType | enum | Chart type: - BAR — bars- LINE — lines |
| orientation | enum | Orientation: - AUTO — auto- HORIZONTAL — horizontal- VERTICAL_LEFT — left-aligned- VERTICAL_RIGHT — right-aligned |
| lineThickness | enum | Line thickness: - THIN — thin- THICK — thickOnly for LINE type |
| lineSmoothing | boolean | Line smoothing Only for LINE type |
| xAxis | — | X-axis settings |
| yAxis | — | Y-axis settings |
Dimension Limit (key: binsLimit)
| Key | Type | Description |
|---|---|---|
| mode | enum | Limit type: - NUMBER — numeric- VARIABLE — by variable- FORMULA — by formula |
| limitValue | number | Value Only for NUMBER mode |
| variable | string | Variable Only for VARIABLE mode |
| formula | string | Formula Only for FORMULA mode |
X-axis Settings (key: xAxis)
| Key | Type | Description |
|---|---|---|
| enabled | boolean | Enable/disable X-axis |
| rotation | number | Label rotation |
| height | number | Label height |
| showTitle | boolean | X-axis title |
Y-axis Settings (key: yAxis)
| Key | Type | Description |
|---|---|---|
| enabled | boolean | Enable/disable Y-axis |
| width | number | Label width |
| showTitle | boolean | Y-axis title |
Filtering Settings in YAML
| Key | Type | Description |
|---|---|---|
| filterMode | enum | Filter mode: - DEFAULT — default- SINGLE — single selection- DISABLED — disabled |
| ignoreFilters | boolean | Ignore filters |
| filters | — | Filters |
| stateName | string | State |
Example of a Configured Widget in the YAML Editor
widgets:
- key: histogram
apiVersion: "16"
type: HISTOGRAM
settings:
titleColor:
mode: AUTO
titleSize: 14
paddings: 8
titleWeight: NORMAL
textSize: 12
filterMode: DEFAULT
ignoreFilters: false
stateName: null
title: ""
showMarkdown: false
markdownMeasures: []
markdownText: ""
markdownTextSize: 14
xAxis:
enabled: true
showTitle: true
yAxis:
enabled: true
showTitle: true
dimensions:
- name: Formula
value:
mode: FORMULA
formula: toDate("phases"."event_time")
dbDataType: Date
formatting: AUTO
hideEmptyValues: false
format: DATE
displayCondition:
mode: DISABLED
color:
mode: AUTO
binsLimit:
mode: NUMBER
limitValue: 8
variable: Variable limit type
formula: count("phases"."event_time")
showHint: false
chartType: LINE
orientation: AUTO
lineSmoothing: true
lineThickness: THICK
Was the article helpful?