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
Widget AWidget BGadget XGadget YTool ZProduct020,00040,00060,00080,000RevenueAccessoriesElectronicsToolscategoryRevenue by Product
▶
▶ Try in Playground ×
Widget AWidget BGadget XGadget YTool ZProduct020,00040,00060,00080,000RevenueAccessoriesElectronicsToolscategoryRevenue by Product
Field Required Description
x Yes Category field
y Yes Value field
color No Group by color

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
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,500RevenueGadget XGadget YTool ZWidget AWidget BproductRevenue Trend
▶
▶ Try in Playground ×
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,500RevenueGadget XGadget YTool ZWidget AWidget BproductRevenue Trend
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
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 07Date01,0002,0003,0004,0005,0006,0007,000RevenueAccessoriesElectronicsToolscategoryRevenue by Category
▶
▶ Try in Playground ×
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 07Date01,0002,0003,0004,0005,0006,0007,000RevenueAccessoriesElectronicsToolscategoryRevenue by Category
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
252627282930313233343536373839404142434445464748495052535455565758596061626365727475767778798081828384858687888990Units Sold05001,0001,5002,0002,500RevenueAccessoriesElectronicsToolscategoryRevenue vs Units
▶
▶ Try in Playground ×
252627282930313233343536373839404142434445464748495052535455565758596061626365727475767778798081828384858687888990Units Sold05001,0001,5002,0002,500RevenueAccessoriesElectronicsToolscategoryRevenue vs Units
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
AccessoriesElectronicsToolsCategoryRevenue by CategoryAccessoriesElectronicsToolsCategoryUnits by Category
▶
▶ Try in Playground ×
AccessoriesElectronicsToolsCategoryRevenue by CategoryAccessoriesElectronicsToolsCategoryUnits by Category
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
235720Total Revenue8121Units Sold
▶
▶ Try in Playground ×
235720Total Revenue8121Units Sold
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
Sales DataDateRegionProductCategoryRevenueUnits Sold2024-01-01NorthWidget AElectronics1500.00502024-01-01SouthWidget BElectronics2200.00802024-01-01EastGadget XAccessories850.00252024-01-01WestWidget AElectronics1800.00602024-01-02NorthGadget YAccessories1200.0040+ 147 more rows
▶
▶ Try in Playground ×
Sales DataDateRegionProductCategoryRevenueUnits Sold2024-01-01NorthWidget AElectronics1500.00502024-01-01SouthWidget BElectronics2200.00802024-01-01EastGadget XAccessories850.00252024-01-01WestWidget AElectronics1800.00602024-01-02NorthGadget YAccessories1200.0040+ 147 more rows

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