ChartArea

Area Chart

Display quantitative data over time or continuous intervals with filled areas under the line.

Basic

A single filled series with axes and grid lines.

func areaChartBasicPreview() templ.Component {
	return chartFrame("area", map[string]any{
		"title":      "Revenue over time",
		"stacked":    false,
		"showPoints": true,
		"series": []map[string]any{
			{"key": "revenue", "label": "Revenue"},
		},
		"data": []map[string]any{
			{"label": "Jan", "revenue": 68},
			{"label": "Feb", "revenue": 84},
			{"label": "Mar", "revenue": 76},
			{"label": "Apr", "revenue": 122},
			{"label": "May", "revenue": 108},
			{"label": "Jun", "revenue": 142},
			{"label": "Jul", "revenue": 156},
		},
	})
}

Stacked

Two stacked series for comparative totals.

func areaChartStackedPreview() templ.Component {
	return chartFrame("area", map[string]any{
		"title":   "Stacked revenue and subscriptions",
		"stacked": true,
		"series": []map[string]any{
			{"key": "desktop", "label": "Desktop"},
			{"key": "mobile", "label": "Mobile"},
		},
		"data": []map[string]any{
			{"label": "Jan", "desktop": 42, "mobile": 24},
			{"label": "Feb", "desktop": 55, "mobile": 26},
			{"label": "Mar", "desktop": 63, "mobile": 31},
			{"label": "Apr", "desktop": 74, "mobile": 39},
			{"label": "May", "desktop": 71, "mobile": 42},
			{"label": "Jun", "desktop": 88, "mobile": 49},
			{"label": "Jul", "desktop": 96, "mobile": 57},
		},
	})
}

Interactive

Hover-ready points and a focused detail state.

func areaChartInteractivePreview() templ.Component {
	return chartFrame("area", map[string]any{
		"title":         "Traffic trend with focus state",
		"stacked":       false,
		"showPoints":    true,
		"showLastPoint": true,
		"series": []map[string]any{
			{"key": "traffic", "label": "Traffic"},
		},
		"data": []map[string]any{
			{"label": "Mon", "traffic": 92},
			{"label": "Tue", "traffic": 116},
			{"label": "Wed", "traffic": 112},
			{"label": "Thu", "traffic": 138},
			{"label": "Fri", "traffic": 146},
			{"label": "Sat", "traffic": 162},
			{"label": "Sun", "traffic": 154},
		},
	})
}