Top.Mail.Ru
Histogram
CTRL+K

Histogram

In this article
  • Histogram
  • Widget Settings
  • Data Settings
  • Display Settings
  • Filtering Settings
  • Browse Mode
  • Widget Configuration in YAML
  • Data Settings in YAML
  • Display Settings in YAML
  • Filtering Settings in YAML
  • Example of a Configured Widget in the YAML Editor

The widget displays approximate calculations as fractional counts.

Histogram example

Warning

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.

Note

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.

Browse mode

To select multiple values on the histogram, press and hold the left mouse button and drag from the first to the last desired bar.

Selection

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.

“In the range” filter in header

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
Note

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

KeyTypeDescription
titlestringTitle
showMarkdownbooleanDescription
markdownTextstringDescription text
markdownMeasuresMeasures in description
dimensionsDimensions

Dimensions in YAML (key: dimensions)

KeyTypeDescription
namestringDimension name
valueIndicator formula
dbDataTypeenumDimension data type
formatenumFormat
formattingenumFormatting
formattingTemplatestringCustom formatting
Only for CUSTOM formatting
hideEmptyValuesbooleanHide empty values
hierarchyDimensionsHierarchy dimensions
If present, the indicator is treated as hierarchical
colorColor:
- AUTO — auto
- BASE — solid
- FORMULA — by formula
- RULE — by rule
Not applicable to hierarchical indicators
displayConditionDisplay (display condition)
arrayNestingbooleanArray nesting
Hierarchical Dimension (key: hierarchyDimensions)
KeyTypeDescription
namestringDimension name
valueDimension formula
dbDataTypeenumDimension data type
formatenumFormat
formattingenumFormatting
formattingTemplatestringCustom formatting
Only for CUSTOM formatting
hideEmptyValuesbooleanHide empty values
colorColor:
- AUTO — auto
- BASE — solid
- FORMULA — by formula
- RULE — by rule
displayConditionDisplay (display condition)
arrayNestingbooleanArray nesting

Display Settings in YAML

KeyTypeDescription
paddingsstringSide paddings
titleSizenumberTitle size
titleColorTitle color:
- AUTO — auto
- BASE — solid
titleWeightenumFont weight:
- NORMAL — normal
- BOLD — bold
markdownTextSizenumberMarkdown description text size
Specifies description text size in Markdown. Available only if Description is enabled
textSizenumberText size
binsLimitnumberDimension limit
chartTypeenumChart type:
- BAR — bars
- LINE — lines
orientationenumOrientation:
- AUTO — auto
- HORIZONTAL — horizontal
- VERTICAL_LEFT — left-aligned
- VERTICAL_RIGHT — right-aligned
lineThicknessenumLine thickness:
- THIN — thin
- THICK — thick
Only for LINE type
lineSmoothingbooleanLine smoothing
Only for LINE type
xAxisX-axis settings
yAxisY-axis settings

Dimension Limit (key: binsLimit)

KeyTypeDescription
modeenumLimit type:
- NUMBER — numeric
- VARIABLE — by variable
- FORMULA — by formula
limitValuenumberValue
Only for NUMBER mode
variablestringVariable
Only for VARIABLE mode
formulastringFormula
Only for FORMULA mode

X-axis Settings (key: xAxis)

KeyTypeDescription
enabledbooleanEnable/disable X-axis
rotationnumberLabel rotation
heightnumberLabel height
showTitlebooleanX-axis title

Y-axis Settings (key: yAxis)

KeyTypeDescription
enabledbooleanEnable/disable Y-axis
widthnumberLabel width
showTitlebooleanY-axis title

Filtering Settings in YAML

KeyTypeDescription
filterModeenumFilter mode:
- DEFAULT — default
- SINGLE — single selection
- DISABLED — disabled
ignoreFiltersbooleanIgnore filters
filtersFilters
stateNamestringState

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?

Yes
No
Previous
Donut Chart
We use cookies to improve our website for you.