Line Charts

Show trends and changes over time with line charts.

---

Basic Line Chart

Single line showing a trend.

```dg
type: line
data:
  source: '[
    {"date": "2024-01", "value": 120},
    {"date": "2024-02", "value": 145},
    {"date": "2024-03", "value": 132},
    {"date": "2024-04", "value": 168},
    {"date": "2024-05", "value": 185},
    {"date": "2024-06", "value": 210}
  ]'
x: date
y: value
title: Monthly Growth
```

When to use: Showing how a value changes over time.

---

Multi-Line Chart

Compare multiple series over time.

```dg
type: line
data:
  source: '[
    {"month": "Jan", "revenue": 100, "product": "Widget A"},
    {"month": "Jan", "revenue": 80, "product": "Widget B"},
    {"month": "Feb", "revenue": 120, "product": "Widget A"},
    {"month": "Feb", "revenue": 95, "product": "Widget B"},
    {"month": "Mar", "revenue": 115, "product": "Widget A"},
    {"month": "Mar", "revenue": 110, "product": "Widget B"},
    {"month": "Apr", "revenue": 140, "product": "Widget A"},
    {"month": "Apr", "revenue": 125, "product": "Widget B"}
  ]'
x: month
y: revenue
color: product
title: Product Revenue Comparison
```

When to use: Comparing trends across categories.

---

Area Chart

Line chart with filled area underneath.

```dg
type: area
data:
  source: '[
    {"date": "2024-01", "users": 1200},
    {"date": "2024-02", "users": 1450},
    {"date": "2024-03", "users": 1320},
    {"date": "2024-04", "users": 1680},
    {"date": "2024-05", "users": 1850},
    {"date": "2024-06", "users": 2100}
  ]'
x: date
y: users
title: User Growth
```

When to use: Emphasizing the magnitude of change.

---

Stacked Area Chart

Show composition changing over time.

```dg
type: area
data:
  source: '[
    {"month": "Jan", "traffic": 5000, "source": "Organic"},
    {"month": "Jan", "traffic": 2000, "source": "Paid"},
    {"month": "Jan", "traffic": 1500, "source": "Social"},
    {"month": "Feb", "traffic": 5500, "source": "Organic"},
    {"month": "Feb", "traffic": 2500, "source": "Paid"},
    {"month": "Feb", "traffic": 1800, "source": "Social"},
    {"month": "Mar", "traffic": 6200, "source": "Organic"},
    {"month": "Mar", "traffic": 2800, "source": "Paid"},
    {"month": "Mar", "traffic": 2200, "source": "Social"}
  ]'
x: month
y: traffic
color: source
stack: true
title: Traffic Sources Over Time
```

When to use: Showing how composition changes over time.

---

Smoothed Line

Curved line for smoother appearance.

```dg
type: line
data:
  source: '[...]'
x: date
y: value
curve: natural
title: Smoothed Trend
```

Curve options: linear (default), natural, step, basis

---

Line with Points

Add dots at data points.

```dg
type: line
data:
  source: '[
    {"x": 1, "y": 10},
    {"x": 2, "y": 25},
    {"x": 3, "y": 18},
    {"x": 4, "y": 32}
  ]'
x: x
y: y
marks:
  - type: line
  - type: dot
title: Line with Data Points
```

---

Configuration Options

Option	Type	Default	Description
curve	string	linear	Line interpolation
strokeWidth	number	1.5	Line thickness
color	string	-	Field for multiple lines
stack	boolean	false	Stack areas (area only)

---

Tips

Tip: Use line charts for continuous data (time, measurements). For discrete categories, use bar charts instead.

Common Mistake: Too many lines make charts unreadable. Limit to 5-7 series maximum.

---

See Also

• Scatter Plots - For relationships between variables
• Bar Charts - For category comparisons
• Specialized Charts - For candlestick and horizon charts