Simple YAML Config

Create charts by describing what you want, not how to build it. YAML configuration puts visualization within reach of anyone who can edit text.

Why YAML?

YAML reads like plain English. Compare these approaches:

JavaScript (D3.js):

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", 600)
  .attr("height", 400);

const x = d3.scaleBand()
  .domain(data.map(d => d.category))
  .range([0, width])
  .padding(0.1);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => x(d.category))
  .attr("y", d => y(d.value))
  .attr("width", x.bandwidth())
  .attr("height", d => height - y(d.value));

DataGlass YAML:

type: bar
x: category
y: value

Same result. No programming required.

Basic Structure

Every chart needs a type and data mapping:

type: bar           # chart type
x: category         # x-axis field
y: value            # y-axis field

Add data inline or reference a file:

type: bar
x: category
y: value
data:
  file: data/sales.csv

Common Patterns

Add a Title

type: bar
x: category
y: value
title: Sales by Category

Color by Group

type: bar
x: category
y: value
color: region

Set Dimensions

type: bar
x: category
y: value
width: 800
height: 400

Stack or Group

type: bar
x: month
y: sales
color: product
stacked: true       # or false for grouped

Type Quick Reference

Type	Purpose	Required Fields
bar	Compare categories	x, y
line	Show trends	x, y
scatter	Find correlations	x, y
area	Emphasize volume	x, y
pie	Show proportions	x, y
treemap	Nested hierarchy	hierarchy
sankey	Flow between nodes	network
force	Network graph	network

Inline Data

Embed data directly in your chart:

type: bar
x: product
y: sales
data:
  source: |
    [
      {"product": "Widget", "sales": 150},
      {"product": "Gadget", "sales": 230},
      {"product": "Gizmo", "sales": 180}
    ]

File References

Point to CSV, JSON, or Parquet files:

data:
  file: data/quarterly-sales.csv

Reference a table in the same note:

data:
  file: "#Sales Table"

Transform Data

Filter, sort, and aggregate before visualization:

type: bar
x: category
y: total
data:
  file: data/orders.csv
transformations:
  - type: filter
    configuration:
      where: { status: { eq: "completed" } }
  - type: aggregate
    configuration:
      groupBy: [category]
      sum: [amount]

Error Messages

DataGlass validates your configuration and reports problems clearly:

Line 3: Unknown chart type "barchart"
Did you mean "bar"?

Line 5: Field "revenue" not found in data
Available fields: product, sales, quantity

Live Preview

Charts render as you type. See changes instantly in Obsidian's preview pane.

Next Steps

• Your First Chart - Step-by-step tutorial
• YAML Schema - Complete option reference
• Cheat Sheet - Quick lookup