ChartLine

Line Chart

Show trends and changes in data over time with connected points.

Linear

Smooth trend lines with point markers.

func lineChartLinearPreview() templ.Component {
	return chartFrame("line", map[string]any{
		"series": []map[string]any{
			{"key": "visits", "label": "Visits"},
		},
		"showPoints": true,
		"data": []map[string]any{
			{"label": "Jan", "visits": 92},
			{"label": "Feb", "visits": 114},
			{"label": "Mar", "visits": 104},
			{"label": "Apr", "visits": 136},
			{"label": "May", "visits": 122},
			{"label": "Jun", "visits": 158},
			{"label": "Jul", "visits": 174},
		},
	})
}

Step

Stepped transitions for state changes.

func lineChartStepPreview() templ.Component {
	return chartFrame("line", map[string]any{
		"series": []map[string]any{
			{"key": "sessions", "label": "Sessions"},
		},
		"step":       true,
		"showPoints": true,
		"data": []map[string]any{
			{"label": "Mon", "sessions": 8},
			{"label": "Tue", "sessions": 13},
			{"label": "Wed", "sessions": 13},
			{"label": "Thu", "sessions": 19},
			{"label": "Fri", "sessions": 19},
			{"label": "Sat", "sessions": 26},
			{"label": "Sun", "sessions": 31},
		},
	})
}

Multiple

Two lines with a shared axis.

func lineChartMultiplePreview() templ.Component {
	return chartFrame("line", map[string]any{
		"series": []map[string]any{
			{"key": "desktop", "label": "Desktop"},
			{"key": "mobile", "label": "Mobile"},
		},
		"showPoints": true,
		"data": []map[string]any{
			{"label": "Jan", "desktop": 88, "mobile": 64},
			{"label": "Feb", "desktop": 96, "mobile": 70},
			{"label": "Mar", "desktop": 104, "mobile": 78},
			{"label": "Apr", "desktop": 118, "mobile": 82},
			{"label": "May", "desktop": 126, "mobile": 94},
			{"label": "Jun", "desktop": 144, "mobile": 104},
		},
	})
}