templUI is now shadcn-templ. You are viewing the 2.0 beta docs. shadcn-templ 2.0 beta. Switch to templUI v1

Beautiful Charts & Graphs

A collection of ready-to-use chart components built with shadcn-templ. From basic charts to rich data displays, copy and paste into your apps.

Browse Charts Documentation

Area Charts Bar Charts Line Charts Pie Charts Radar Charts Radial Charts Tooltips

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-default.tsx.

var chartRadarDefaultData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 305},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 273},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 214},
}

var chartRadarDefaultConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarDefault() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-default", Config: chartRadarDefaultConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarDefaultData}) {
					@chart.Tooltip(chart.TooltipProps{Cursor: chart.Bool(false)})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.PolarGrid(chart.PolarGridProps{})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-dots.tsx.

var chartRadarDotsData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 305},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 273},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 214},
}

var chartRadarDotsConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarDots() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center"}) {
			@card.Title() {
				Radar Chart - Dots
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-dots", Config: chartRadarDotsConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarDotsData}) {
					@chart.Tooltip(chart.TooltipProps{Cursor: chart.Bool(false)})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.PolarGrid(chart.PolarGridProps{})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
						Dot:         &chart.DotProps{R: 4, FillOpacity: 1},
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-lines-only.tsx.

var chartRadarLinesOnlyData = []chart.Datum{
	{"month": "January", "desktop": 186, "mobile": 160},
	{"month": "February", "desktop": 185, "mobile": 170},
	{"month": "March", "desktop": 207, "mobile": 180},
	{"month": "April", "desktop": 173, "mobile": 160},
	{"month": "May", "desktop": 160, "mobile": 190},
	{"month": "June", "desktop": 174, "mobile": 204},
}

var chartRadarLinesOnlyConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
	{Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},
}

templ ChartRadarLinesOnly() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Lines Only
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-lines-only", Config: chartRadarLinesOnlyConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarLinesOnlyData}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{Indicator: "line"},
					})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.PolarGrid(chart.PolarGridProps{RadialLines: chart.Bool(false)})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0),
						Stroke:      "var(--color-desktop)",
						StrokeWidth: 2,
					})
					@chart.Radar(chart.RadarProps{
						DataKey:     "mobile",
						Fill:        "var(--color-mobile)",
						FillOpacity: chart.Float(0),
						Stroke:      "var(--color-mobile)",
						StrokeWidth: 2,
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"fmt"

	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-label-custom.tsx.

var chartRadarLabelCustomData = []chart.Datum{
	{"month": "January", "desktop": 186, "mobile": 80},
	{"month": "February", "desktop": 305, "mobile": 200},
	{"month": "March", "desktop": 237, "mobile": 120},
	{"month": "April", "desktop": 73, "mobile": 190},
	{"month": "May", "desktop": 209, "mobile": 130},
	{"month": "June", "desktop": 214, "mobile": 140},
}

var chartRadarLabelCustomConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
	{Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},
}

// radarLabelCustomTick is the pendant of the demo's tick render prop: both
// values above each other with the month underneath, the top tick nudged.
func radarLabelCustomTick(d chart.Datum, index int) chart.TickContent {
	offset := 0.0
	if index == 0 {
		offset = -10
	}
	return chart.TickContent{
		FontSize:   13,
		FontWeight: "500",
		OffsetY:    offset,
		Spans: []chart.TickSpan{
			{Text: fmt.Sprint(d["desktop"])},
			{Text: "/", Class: "fill-muted-foreground"},
			{Text: fmt.Sprint(d["mobile"])},
			{Text: fmt.Sprint(d["month"]), ResetX: true, Dy: "1rem", FontSize: 12, Class: "fill-muted-foreground"},
		},
	}
}

templ ChartRadarLabelCustom() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Custom Label
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-label-custom", Config: chartRadarLabelCustomConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{
					Data: chartRadarLabelCustomData,
					Margin: &chart.Margin{Top: 10, Right: 10, Bottom: 10, Left: 10},
				}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{Indicator: "line"},
					})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{
						DataKey: "month",
						Tick:    radarLabelCustomTick,
					})
					@chart.PolarGrid(chart.PolarGridProps{})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
					})
					@chart.Radar(chart.RadarProps{
						DataKey:     "mobile",
						Fill:        "var(--color-mobile)",
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-grid-custom.tsx.

var chartRadarGridCustomData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 305},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 273},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 214},
}

var chartRadarGridCustomConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarGridCustom() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Grid Custom
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-grid-custom", Config: chartRadarGridCustomConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarGridCustomData}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.PolarGrid(chart.PolarGridProps{RadialLines: chart.Bool(false), PolarRadius: []float64{90}, StrokeWidth: 1})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-grid-none.tsx.

var chartRadarGridNoneData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 305},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 273},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 214},
}

var chartRadarGridNoneConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarGridNone() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Grid None
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-grid-none", Config: chartRadarGridNoneConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarGridNoneData}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
						Dot:         &chart.DotProps{R: 4, FillOpacity: 1},
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-grid-circle.tsx.

var chartRadarGridCircleData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 305},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 273},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 214},
}

var chartRadarGridCircleConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarGridCircle() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Grid Circle
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-grid-circle", Config: chartRadarGridCircleConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarGridCircleData}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.PolarGrid(chart.PolarGridProps{GridType: "circle"})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
						Dot:         &chart.DotProps{R: 4, FillOpacity: 1},
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-grid-circle-no-lines.tsx.

var chartRadarGridCircleNoLinesData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 305},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 203},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 214},
}

var chartRadarGridCircleNoLinesConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarGridCircleNoLines() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Grid Circle - No lines
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-grid-circle-no-lines", Config: chartRadarGridCircleNoLinesConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarGridCircleNoLinesData}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.PolarGrid(chart.PolarGridProps{GridType: "circle", RadialLines: chart.Bool(false)})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
						Dot:         &chart.DotProps{R: 4, FillOpacity: 1},
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-grid-circle-fill.tsx.

var chartRadarGridCircleFillData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 285},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 203},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 264},
}

var chartRadarGridCircleFillConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarGridCircleFill() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Grid Circle Filled
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-grid-circle-fill", Config: chartRadarGridCircleFillConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarGridCircleFillData}) {
					@chart.Tooltip(chart.TooltipProps{Cursor: chart.Bool(false)})
					@chart.PolarGrid(chart.PolarGridProps{GridType: "circle", Class: "fill-(--color-desktop) opacity-20"})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.5),
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-grid-fill.tsx.

var chartRadarGridFillData = []chart.Datum{
	{"month": "January", "desktop": 186},
	{"month": "February", "desktop": 285},
	{"month": "March", "desktop": 237},
	{"month": "April", "desktop": 203},
	{"month": "May", "desktop": 209},
	{"month": "June", "desktop": 264},
}

var chartRadarGridFillConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
}

templ ChartRadarGridFill() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Grid Filled
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-grid-fill", Config: chartRadarGridFillConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarGridFillData}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.PolarGrid(chart.PolarGridProps{Class: "fill-(--color-desktop) opacity-20"})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.5),
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-multiple.tsx.

var chartRadarMultipleData = []chart.Datum{
	{"month": "January", "desktop": 186, "mobile": 80},
	{"month": "February", "desktop": 305, "mobile": 200},
	{"month": "March", "desktop": 237, "mobile": 120},
	{"month": "April", "desktop": 73, "mobile": 190},
	{"month": "May", "desktop": 209, "mobile": 130},
	{"month": "June", "desktop": 214, "mobile": 140},
}

var chartRadarMultipleConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
	{Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},
}

templ ChartRadarMultiple() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center pb-4"}) {
			@card.Title() {
				Radar Chart - Multiple
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content(card.ContentProps{Class: "pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "radar-multiple", Config: chartRadarMultipleConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{Data: chartRadarMultipleData}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{Indicator: "line"},
					})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.PolarGrid(chart.PolarGridProps{})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
					})
					@chart.Radar(chart.RadarProps{
						DataKey:     "mobile",
						Fill:        "var(--color-mobile)",
					})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Radar Chart

package charts

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/chart"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

// The pendant of chart-radar-legend.tsx.

var chartRadarLegendData = []chart.Datum{
	{"month": "January", "desktop": 186, "mobile": 80},
	{"month": "February", "desktop": 305, "mobile": 200},
	{"month": "March", "desktop": 237, "mobile": 120},
	{"month": "April", "desktop": 73, "mobile": 190},
	{"month": "May", "desktop": 209, "mobile": 130},
	{"month": "June", "desktop": 214, "mobile": 140},
}

var chartRadarLegendConfig = chart.Config{
	{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
	{Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},
}

templ ChartRadarLegend() {
	@card.Card() {
		@card.Header(card.HeaderProps{Class: "items-center"}) {
			@card.Title() {
				Radar Chart - Legend
			}
			@card.Description() {
				Showing total visitors for the last 6 months
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "radar-legend", Config: chartRadarLegendConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.RadarChart(chart.RadarChartProps{
					Data: chartRadarLegendData,
					Margin: &chart.Margin{Top: -40, Bottom: -10, Left: 0, Right: 0},
				}) {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{Indicator: "line"},
					})
					@chart.PolarAngleAxis(chart.PolarAngleAxisProps{DataKey: "month"})
					@chart.PolarGrid(chart.PolarGridProps{})
					@chart.Radar(chart.RadarProps{
						DataKey:     "desktop",
						Fill:        "var(--color-desktop)",
						FillOpacity: chart.Float(0.6),
					})
					@chart.Radar(chart.RadarProps{
						DataKey:     "mobile",
						Fill:        "var(--color-mobile)",
					})
					@chart.Legend(chart.LegendProps{Class: "mt-8"})
				}
			}
		}
		@card.Footer(card.FooterProps{Class: "flex-col gap-2 pt-4 text-sm"}) {
			<div class="flex items-center gap-2 leading-none font-medium">
			Trending up by 5.2% this month
			@icon.TrendingUp(icon.Props{Class: "h-4 w-4"})
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
			January - June 2024
			</div>
		}
	}
}

Beautiful Charts & Graphs

radar Charts