Skip to content

Chart Types

Dataface renders charts using Vega-Lite. All Vega-Lite chart types are supported and passed through directly.

Bar Chart

Best for: Comparing values across categories

charts:
  bar:
    query: _doc_examples.yaml#sales
    type: bar
    title: Revenue by Product
    x: product
    y: revenue
    color: category
rows:
  - bar
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')
Field Required Description
x Yes Category field
y Yes Value field
color No Group by color

Horizontal Bar Chart

Use settings.orientation: horizontal for horizontal bars - great for long category labels or ranked lists:

charts:
  horizontal_bar:
    query: _doc_examples.yaml#sales
    type: bar
    title: Revenue by Product
    x: product
    y: revenue
    settings:
      orientation: horizontal
rows:
  - horizontal_bar
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')
Setting Value Description
settings.orientation horizontal Swaps x/y axes for horizontal bars

Line Chart

Best for: Trends over time

charts:
  line:
    query: _doc_examples.yaml#sales
    type: line
    title: Revenue Trend
    x: date
    y: revenue
    color: product
rows:
  - line
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')
Field Required Description
x Yes Time/category field
y Yes Value field
color No Series grouping

Area Chart

Best for: Stacked trends, showing composition over time

charts:
  area:
    query: _doc_examples.yaml#sales
    type: area
    title: Revenue by Category
    x: date
    y: revenue
    color: category
rows:
  - area
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')
Field Required Description
x Yes Time/category field
y Yes Value field
color No Stack grouping

Scatter Plot

Best for: Relationships between two metrics

charts:
  scatter:
    query: _doc_examples.yaml#sales
    type: scatter
    title: Revenue vs Units
    x: units_sold
    y: revenue
    color: category
rows:
  - scatter
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')
Field Required Description
x Yes First metric
y Yes Second metric
color No Category grouping
size No Bubble size

Pie & Donut Charts

Best for: Part-to-whole relationships, proportions

charts:
  pie:
    query: _doc_examples.yaml#sales
    type: pie
    title: Revenue by Category
    x: category
    y: revenue
  donut:
    query: _doc_examples.yaml#sales
    type: donut
    title: Units by Category
    x: category
    y: units_sold
cols:
  - pie
  - donut
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')
Field Required Description
x Yes Category field
y Yes Value field

Use donut for a hollow center (good for placing a label or KPI).

KPI Display

Best for: Single metric highlights, key numbers

charts:
  revenue_kpi:
    query: _doc_examples.yaml#sales
    type: kpi
    title: Total Revenue
    metric: revenue
  units_kpi:
    query: _doc_examples.yaml#sales
    type: kpi
    title: Units Sold
    metric: units_sold
cols:
  - revenue_kpi
  - units_kpi
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')
Field Required Description
metric Yes Field to aggregate and display

Table

Best for: Detailed data view, exact values

charts:
  table:
    query: _doc_examples.yaml#sales
    type: table
    title: Sales Data
rows:
  - table
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')

Tables automatically format numbers, convert snake_case headers to Title Case, and show a "more rows" indicator when data is truncated.