Your First Chart

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

Live Example

Here's a chart rendered right in this documentation:

View Source

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

The Simplest Chart

Create a new note and paste this:

View Source

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

View Source

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:

View Source

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:

View Source

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
```

Sample Data Available

Check out the Sample Data folder for ready-to-use CSV and JSON files you can download and use in your own vault.

---

Next: Basic Concepts | See all: Chart Gallery