ChartBar

Bar Chart

Compare categories or groups of data using rectangular bars of varying heights.

Vertical

Classic vertical bars for category comparisons.

func barChartVerticalPreview() templ.Component {
	return chartFrame("bar", map[string]any{
		"orientation": "vertical",
		"series": []map[string]any{
			{"key": "sales", "label": "Sales"},
		},
		"data": []map[string]any{
			{"label": "Mon", "sales": 24},
			{"label": "Tue", "sales": 36},
			{"label": "Wed", "sales": 48},
			{"label": "Thu", "sales": 31},
			{"label": "Fri", "sales": 58},
			{"label": "Sat", "sales": 74},
		},
	})
}

Horizontal

Space-efficient bars for long labels.

func barChartHorizontalPreview() templ.Component {
	return chartFrame("bar", map[string]any{
		"orientation": "horizontal",
		"series": []map[string]any{
			{"key": "completion", "label": "Completion"},
		},
		"data": []map[string]any{
			{"label": "Marketing", "completion": 84},
			{"label": "Engineering", "completion": 92},
			{"label": "Sales", "completion": 66},
			{"label": "Support", "completion": 78},
			{"label": "Design", "completion": 58},
		},
	})
}

Multiple

Grouped series with two metrics per category.

func barChartMultiplePreview() templ.Component {
	return chartFrame("bar", map[string]any{
		"orientation": "vertical",
		"series": []map[string]any{
			{"key": "desktop", "label": "Desktop"},
			{"key": "mobile", "label": "Mobile"},
		},
		"data": []map[string]any{
			{"label": "Jan", "desktop": 24, "mobile": 14},
			{"label": "Feb", "desktop": 32, "mobile": 18},
			{"label": "Mar", "desktop": 40, "mobile": 22},
			{"label": "Apr", "desktop": 38, "mobile": 26},
			{"label": "May", "desktop": 50, "mobile": 30},
			{"label": "Jun", "desktop": 56, "mobile": 34},
		},
	})
}