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_by_category
    type: bar
    title: "Main Chart (50%)"
    x: category
    y: revenue
  kpi1:
    query: _doc_examples.yaml#sales_summary
    type: kpi
    title: "Side Chart 1 (25%)"
    metric: revenue
  kpi2:
    query: _doc_examples.yaml#sales_summary
    type: kpi
    title: "Side Chart 2 (25%)"
    metric: units_sold

# 50% / 25% / 25% split using nested cols
cols:
  - main_chart
  - cols:
      - kpi1
      - kpi2
Asymmetric Layout AccessoriesElectronicsToolsCategory$0$20,000$40,000$60,000$80,000$100,000$120,000$140,000$160,000RevenueMain Chart (50%) Side Chart 1 (25%) 847,293 Side Chart 2 (25%) 5,842 2026-03-23 08:25
▶
▶ Try in Playground ×
Asymmetric Layout AccessoriesElectronicsToolsCategory$0$20,000$40,000$60,000$80,000$100,000$120,000$140,000$160,000RevenueMain Chart (50%) Side Chart 1 (25%) 847,293 Side Chart 2 (25%) 5,842 2026-03-23 08:25

Complex Nesting

title: "Complex Dashboard"

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

rows:
  - cols:
      - kpi1
      - kpi2
      - cols:
          - mini1
          - mini2
  - main
Complex Dashboard Revenue 847,293 Units Sold 5,842 AccessoriesElectronicsToolsCategory$0$100,000$50,000$150,000RevenueMini Chart 1Gadget XGadget YTool ZWidget AWidget BProduct05001,0001,5002,0002,5003,0003,500Units SoldMini Chart 2 Tue 02Thu 04Sat 06Mon 08Wed 10Fri 12Jan 14Tue 16Thu 18Sat 20Mon 22Wed 24Fri 26Jan 28Tue 30FebruarySat 03Mon 05Wed 07Date$0$1,000$2,000$3,000$4,000$5,000RevenueAccessoriesElectronicsToolscategoryMain Analysis 2026-03-23 08:25
▶
▶ Try in Playground ×
Complex Dashboard Revenue 847,293 Units Sold 5,842 AccessoriesElectronicsToolsCategory$0$100,000$50,000$150,000RevenueMini Chart 1Gadget XGadget YTool ZWidget AWidget BProduct05001,0001,5002,0002,5003,0003,500Units SoldMini Chart 2 Tue 02Thu 04Sat 06Mon 08Wed 10Fri 12Jan 14Tue 16Thu 18Sat 20Mon 22Wed 24Fri 26Jan 28Tue 30FebruarySat 03Mon 05Wed 07Date$0$1,000$2,000$3,000$4,000$5,000RevenueAccessoriesElectronicsToolscategoryMain Analysis 2026-03-23 08:25

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"