Skip to content

Board Sizing

Dataface uses a "smart sizing" system that automatically divides space among items.

Default Behavior

Width Rule

All items in a layout split the available width evenly: - In a cols layout with 2 items, each gets 50% - In a cols layout with 3 items, each gets 33.3%

Height Rule

Heights are determined by the content or chart type aspect ratios, unless explicitly set.

Unequal Widths with Nesting

Use nested lists as a shorthand for nested boards. A nested list automatically inherits the layout type (rows or cols) of its parent.

50% / 25% / 25% Split

To make the first chart take up half the width (50%) and the next two share the remaining half (25% each), nest them in a list:

title: "Asymmetric Layout"

charts:
  main_chart:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Main Chart (50%)"
    x: category
    y: revenue
  kpi1:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Side Chart 1 (25%)"
    metric: revenue
  kpi2:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Side Chart 2 (25%)"
    metric: units_sold

# 50% / 25% / 25% split using nested cols
cols:
  - main_chart
  - cols:
      - kpi1
      - kpi2
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')
▶
▶ Try in Playground ×
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')

Complex Nesting

title: "Complex Dashboard"

charts:
  kpi1:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Revenue"
    metric: revenue
  kpi2:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Units Sold"
    metric: units_sold
  mini1:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Mini Chart 1"
    x: category
    y: revenue
  mini2:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Mini Chart 2"
    x: product
    y: units_sold
  main:
    query: _doc_examples.yaml#sales
    type: line
    title: "Main Analysis"
    x: date
    y: revenue
    color: category

rows:
  - cols:
      - kpi1
      - kpi2
      - cols:
          - mini1
          - mini2
  - main
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')
▶
▶ Try in Playground ×
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')

Explicit Sizing

Height on Rows

Set explicit height on row items:

rows:
  - height: "120px"
    cols:
      - kpi1
      - kpi2
      - kpi3

  - main_chart  # Takes remaining height

Grid Sizing

In grid layouts, use width and height on items:

grid:
  columns: 12
  items:
    - item: kpi1
      width: 4      # 4 of 12 columns
    - item: kpi2
      width: 4
    - item: main_chart
      width: 8
      height: 2     # 2 rows tall
    - item: sidebar
      width: 4
      height: 2

Sizing Patterns

KPI Row + Main Chart

rows:
  - height: "100px"
    cols: [kpi1, kpi2, kpi3]
  - main_chart

cols:
  - cols:           # 66% main content
      - chart1
      - chart2
  - sidebar_chart   # 33% sidebar

Header + Body + Footer

rows:
  - height: "80px"
    content: "# Dashboard Title"
  - main_content    # Flexible middle
  - height: "60px"
    content: "Footer text"