Your First Chart

Create a chart in 30 seconds. No data files needed.

The Simplest Chart

Create a new note and paste this:

```dg
type: bar
data:
  source: '[{"month": "Jan", "sales": 100}, {"month": "Feb", "sales": 150}, {"month": "Mar", "sales": 120}]'
x: month
y: sales
```

You should see a bar chart with three bars.

What just happened?

• type: bar - We want a bar chart
• data: source: - The data is right here in the code block
• x: month - The horizontal axis shows months
• y: sales - The vertical axis shows sales numbers

Add a Title

```dg
type: bar
data:
  source: '[{"month": "Jan", "sales": 100}, {"month": "Feb", "sales": 150}, {"month": "Mar", "sales": 120}]'
x: month
y: sales
title: Monthly Sales
```

Try a Different Chart Type

Change type: bar to type: line:

```dg
type: line
data:
  source: '[{"month": "Jan", "sales": 100}, {"month": "Feb", "sales": 150}, {"month": "Mar", "sales": 120}]'
x: month
y: sales
title: Monthly Sales Trend
```

Other types to try: scatter, area, pie

Add Color

Group your data by category using the color property:

```dg
type: bar
data:
  source: '[
    {"month": "Jan", "sales": 100, "region": "North"},
    {"month": "Jan", "sales": 80, "region": "South"},
    {"month": "Feb", "sales": 150, "region": "North"},
    {"month": "Feb", "sales": 90, "region": "South"}
  ]'
x: month
y: sales
color: region
title: Sales by Region
```

Use Your Own Data

Inline data is great for quick demos, but real charts use real data:

From a CSV file:

```dg
type: bar
data:
  file: data/sales.csv
x: month
y: revenue
```

From a URL:

```dg
type: line
data:
  url: https://example.com/api/metrics.json
x: date
y: value
```

From your vault:

```dg
type: pie
data:
  query: from:Projects where:tag:#active
x: status
y: count
```

---

Next: Basic Concepts | See all: Chart Gallery