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
Asymmetric Layout ElectronicsAccessoriesToolsCategory020,00040,00060,00080,000100,000120,000140,000160,000RevenueMain Chart (50%) 235720Side Chart 1 (25%)8121Side Chart 2 (25%)
â–¶
â–¶ Try in Playground ×
Asymmetric Layout ElectronicsAccessoriesToolsCategory020,00040,00060,00080,000100,000120,000140,000160,000RevenueMain Chart (50%) 235720Side Chart 1 (25%)8121Side Chart 2 (25%)

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
Complex Dashboard 235720Revenue8121Units Sold ElectronicsAccessoriesToolsCategory020,00040,00060,00080,000100,000120,000140,000160,000RevenueMini Chart 1Widget AWidget BGadget XGadget YTool ZProduct05001,0001,5002,0002,5003,0003,500Units SoldMini Chart 2 2024Tue 02Wed 03Thu 04Fri 05Sat 06Jan 07Mon 08Tue 09Wed 10Thu 11Fri 12Sat 13Jan 14Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Jan 21Mon 22Tue 23Wed 24Thu 25Fri 26Sat 27Jan 28Mon 29Tue 30Wed 31FebruaryFri 02Sat 03Feb 04Mon 05Tue 06Wed 07Date05001,0001,5002,0002,500RevenueAccessoriesElectronicsToolscategoryMain Analysis
â–¶
â–¶ Try in Playground ×
Complex Dashboard 235720Revenue8121Units Sold ElectronicsAccessoriesToolsCategory020,00040,00060,00080,000100,000120,000140,000160,000RevenueMini Chart 1Widget AWidget BGadget XGadget YTool ZProduct05001,0001,5002,0002,5003,0003,500Units SoldMini Chart 2 2024Tue 02Wed 03Thu 04Fri 05Sat 06Jan 07Mon 08Tue 09Wed 10Thu 11Fri 12Sat 13Jan 14Mon 15Tue 16Wed 17Thu 18Fri 19Sat 20Jan 21Mon 22Tue 23Wed 24Thu 25Fri 26Sat 27Jan 28Mon 29Tue 30Wed 31FebruaryFri 02Sat 03Feb 04Mon 05Tue 06Wed 07Date05001,0001,5002,0002,500RevenueAccessoriesElectronicsToolscategoryMain Analysis

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"