Chart

templ ChartDemo() {
	{{
		labels := []string{"January", "February", "March", "April", "May", "June"}
		values := []float64{186, 305, 237, 173, 209, 264}
		areaLabels, areaSeries := visitorSeries(48)
	}}
	<div class="mx-auto grid w-full max-w-2xl gap-4">
		@ui.Card("", nil) {
			@ui.CardHeader("", nil) {
				@ui.CardTitle("", nil) {
					Total Visitors
				}
				@ui.CardDescription("", nil) {
					Area chart with a gradient fill — the last 6 weeks.
				}
			}
			@ui.CardContent("", nil) {
				@ui.ChartCanvasMulti("demo-area", "area", areaLabels, areaSeries, "h-[260px]", nil)
			}
		}
		<div class="grid gap-4 sm:grid-cols-2">
			@ui.Card("", nil) {
				@ui.CardHeader("", nil) {
					@ui.CardTitle("", nil) {
						Bar Chart
					}
					@ui.CardDescription("", nil) {
						January – June 2026
					}
				}
				@ui.CardContent("", nil) {
					@ui.ChartCanvas("demo-bar", "bar", labels, values, "h-[220px]", nil)
				}
			}
			@ui.Card("", nil) {
				@ui.CardHeader("", nil) {
					@ui.CardTitle("", nil) {
						Line Chart
					}
					@ui.CardDescription("", nil) {
						January – June 2026
					}
				}
				@ui.CardContent("", nil) {
					@ui.ChartCanvas("demo-line", "line", labels, values, "h-[220px]", nil)
				}
			}
		</div>
	</div>
	@ui.ChartScripts()
}