Bar Charts
Compare categories or show rankings with bar charts.
Basic Bar Chart
Vertical bars comparing categories.
markdown
```dg
type: bar
data:
source: '[
{"product": "Laptops", "sales": 1250},
{"product": "Phones", "sales": 2100},
{"product": "Tablets", "sales": 890},
{"product": "Monitors", "sales": 650}
]'
x: product
y: sales
title: Product Sales
```1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
When to use: Comparing discrete categories where order doesn't matter.
Horizontal Bar Chart
Better for long category labels or rankings.
markdown
```dg
type: bar
data:
source: '[
{"country": "United States", "population": 331},
{"country": "Brazil", "population": 214},
{"country": "Indonesia", "population": 273},
{"country": "Pakistan", "population": 220},
{"country": "Nigeria", "population": 211}
]'
x: population
y: country
horizontal: true
title: Population by Country (millions)
```1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
When to use: Long labels, ranked data, or when you have many categories.
Grouped Bar Chart
Compare multiple series side by side.
markdown
```dg
type: bar
data:
source: '[
{"quarter": "Q1", "revenue": 120, "region": "North"},
{"quarter": "Q1", "revenue": 95, "region": "South"},
{"quarter": "Q2", "revenue": 145, "region": "North"},
{"quarter": "Q2", "revenue": 110, "region": "South"},
{"quarter": "Q3", "revenue": 160, "region": "North"},
{"quarter": "Q3", "revenue": 125, "region": "South"},
{"quarter": "Q4", "revenue": 180, "region": "North"},
{"quarter": "Q4", "revenue": 140, "region": "South"}
]'
x: quarter
y: revenue
color: region
title: Quarterly Revenue by Region
```1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
When to use: Comparing values across categories and groups.
Stacked Bar Chart
Show part-to-whole relationships over categories.
markdown
```dg
type: bar
data:
source: '[
{"month": "Jan", "amount": 800, "type": "Fixed"},
{"month": "Jan", "amount": 450, "type": "Variable"},
{"month": "Feb", "amount": 800, "type": "Fixed"},
{"month": "Feb", "amount": 520, "type": "Variable"},
{"month": "Mar", "amount": 800, "type": "Fixed"},
{"month": "Mar", "amount": 380, "type": "Variable"}
]'
x: month
y: amount
color: type
stack: true
title: Monthly Costs
```1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
When to use: Showing composition and totals together.
Sorted Bar Chart
Rank items from highest to lowest.
markdown
```dg
type: bar
data:
file: data/sales.csv
transformations:
- type: aggregate
configuration:
groupBy: ["category"]
sum: ["revenue"]
- type: sort
configuration:
by: revenue_sum
order: desc
x: category
y: revenue_sum
horizontal: true
title: Revenue by Category (Ranked)
```1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Top N Bar Chart
Show only the top items.
markdown
```dg
type: bar
data:
file: data/products.csv
transformations:
- type: sort
configuration:
by: sales
order: desc
- type: limit
configuration:
count: 5
x: product
y: sales
title: Top 5 Products
```1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
horizontal | boolean | false | Horizontal bars |
stack | boolean | false | Stack bars by color |
color | string | - | Field for color grouping |
title | string | - | Chart title |
width | number | 640 | Chart width |
height | number | 400 | Chart height |
Color Customization
markdown
```dg
type: bar
data:
source: '[...]'
x: category
y: value
color: group
scales:
color:
scheme: "tableau10"
```1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Available schemes: category10, paired, set1, set2, tableau10
See Also
- Line Charts - For trends over time
- Pie Charts - For proportions
- Transformations - For grouping data