Combined Bar Chart

A Combined Bar Chart is useful when you need to display multiple measures with different scales.

Widget Settings

In addition to the common widget settings, this widget has unique configuration options.

Data Settings

You can add dimensions and measures to the widget. For dimensions, you can hide empty values, add click actions, and configure the Display parameter (Always / By variable / By formula).

Measures offer additional settings.

Type

Controls how the chart is displayed: Auto (default), as bars, or as a line with points. When using a line, you can adjust its thickness.

Additionally, you can enable Data labels for a measure and specify their size.

Display Settings

Text Size

Controls the font size within the widget, excluding measure Data labels.

Dimension Limit

Controls the number of bars or points displayed on the chart.

Hide Empty Values

Enable this option to exclude empty values from the chart.

Hint

When enabled, hovering over a bar or point in Browse mode displays a hint with detailed information about the data shown.

Type

If the chart contains two or more bar-type measures, you can choose how bars are displayed: stacked or grouped.

Orientation

Controls the direction in which bars are displayed:

• Auto (default)
• Vertical
• Left-aligned vertical
• Right-aligned vertical

If the dimension uses a time-based format, the chart orientation is vertical; otherwise, it is horizontal.

Bar Width

Default: Auto (20 pixels for horizontal orientation, 36 pixels for vertical). Acceptable values range from 12 to 100 pixels. The input value sets the maximum bar width, provided there is enough space on the chart (gaps between bars are at least as wide as the bars themselves). If space is insufficient, the bar width is automatically reduced to the maximum possible for each specific case.

Line Smoothing

Enable this option to make lines on the chart smoother (available only for the line-with-points display mode).

Legend

Details on working with the legend are described on the Widgets page.

X-Axis

For the X-axis, you can enable a title and configure label rotation and height.

Y-Axis

For the Y-axis, you can enable a title and set label width.

Y2-Axis

For the Y2-axis, you can enable a title, set label width, and define a value range.

Filtering Settings

The widget supports standard filtering settings.

Widget Configuration in YAML

The widget can be edited not only visually but also in the YAML editor. The table below lists the keys and values you can use for configuration. For details on working with 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

Dimensions in YAML (key: dimensions)

Hierarchical Dimension (key: hierarchyDimensions)

Measures in YAML (key: measures)

Measure Display Type in YAML (key: display)

Value Labels in YAML (key: showLabels)

Display Settings in YAML

Total Value Labels (key: showTotalLabels)

X-Axis Settings (key: xAxis)

X2-Axis Settings (key: x2Axis)

Range Values in YAML (key: range)

Y-Axis Settings (key: yAxis)

Y2-Axis Settings (key: y2Axis)

Filtering Settings in YAML

Example of a Configured Widget in the YAML Editor

- key: combined-bar-chart
  apiVersion: "16"
  type: COMBINED_CHART
  settings:
    title: ""
    titleSize: 14
    titleColor:
      mode: AUTO
    titleWeight: NORMAL
    showMarkdown: false
    markdownMeasures: []
    markdownText: ""
    textSize: 12
    displayCondition:
      mode: DISABLED
    showTotalLabels:
      enabled: false
      size: 12
    xAxis:
      enabled: true
      showTitle: false
    x2Axis:
      enabled: true
      showTitle: false
      rangeSwitch: false
      range: {}
    yAxis:
      enabled: true
      showTitle: false
    y2Axis:
      enabled: true
      showTitle: false
      rangeSwitch: false
      range: {}
    dimensionLimit: 15
    dimensions:
      - name: Store
        value:
          mode: FORMULA
          formula: '"store"."Store"'
        dbDataType: STRING
        format: STRING
        formatting: AUTO
        displayCondition:
          mode: DISABLED
        color:
          mode: DISABLED
        onClick: []
    measures:
      - name: Profitability
        value:
          mode: FORMULA
          formula: (sum("sale"."Sales amount") - sum("sale"."Cost") )/
            sum("sale"."Sales amount") * 100
        dbDataType: FLOAT
        format: NUMBER
        formatting: x.x[%]
        display:
          mode: STACK
          lineThickness: THIN
        showLabels:
          enabled: true
          size: 12
        color:
          mode: BASE
          value: "#c5d4e0"
        displayCondition:
          mode: DISABLED
        formattingTemplate: ""
      - name: Cost
        value:
          mode: TEMPLATE
          dbType: CH
          tableName: sale
          columnName: Cost
          templateName: sum
        dbDataType: FLOAT
        format: NUMBER
        formatting: AUTO
        display:
          mode: LINE
          lineThickness: THICK
        showLabels:
          enabled: true
          size: 12
        color:
          mode: BASE
          value: "#078936"
        displayCondition:
          mode: DISABLED
    chartType: STACK
    lineSmoothing: true
    orientation: HORIZONTAL
    legend:
      position: BOTTOM
      align: CENTER
    filterMode: DEFAULT
    ignoreFilters: false
    stateName: null
    filters: []
    sorting: []