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.
package charts import ( "fmt" "strings" "time" "github.com/axadrn/shadcn-templ/v2/components/card" "github.com/axadrn/shadcn-templ/v2/components/chart" "github.com/axadrn/shadcn-templ/v2/utils") // The pendant of chart-line-interactive.tsx. var chartLineInteractiveData = []chart.Datum{ {"date": "2024-04-01", "desktop": 222, "mobile": 150}, {"date": "2024-04-02", "desktop": 97, "mobile": 180}, {"date": "2024-04-03", "desktop": 167, "mobile": 120}, {"date": "2024-04-04", "desktop": 242, "mobile": 260}, {"date": "2024-04-05", "desktop": 373, "mobile": 290}, {"date": "2024-04-06", "desktop": 301, "mobile": 340}, {"date": "2024-04-07", "desktop": 245, "mobile": 180}, {"date": "2024-04-08", "desktop": 409, "mobile": 320}, {"date": "2024-04-09", "desktop": 59, "mobile": 110}, {"date": "2024-04-10", "desktop": 261, "mobile": 190}, {"date": "2024-04-11", "desktop": 327, "mobile": 350}, {"date": "2024-04-12", "desktop": 292, "mobile": 210}, {"date": "2024-04-13", "desktop": 342, "mobile": 380}, {"date": "2024-04-14", "desktop": 137, "mobile": 220}, {"date": "2024-04-15", "desktop": 120, "mobile": 170}, {"date": "2024-04-16", "desktop": 138, "mobile": 190}, {"date": "2024-04-17", "desktop": 446, "mobile": 360}, {"date": "2024-04-18", "desktop": 364, "mobile": 410}, {"date": "2024-04-19", "desktop": 243, "mobile": 180}, {"date": "2024-04-20", "desktop": 89, "mobile": 150}, {"date": "2024-04-21", "desktop": 137, "mobile": 200}, {"date": "2024-04-22", "desktop": 224, "mobile": 170}, {"date": "2024-04-23", "desktop": 138, "mobile": 230}, {"date": "2024-04-24", "desktop": 387, "mobile": 290}, {"date": "2024-04-25", "desktop": 215, "mobile": 250}, {"date": "2024-04-26", "desktop": 75, "mobile": 130}, {"date": "2024-04-27", "desktop": 383, "mobile": 420}, {"date": "2024-04-28", "desktop": 122, "mobile": 180}, {"date": "2024-04-29", "desktop": 315, "mobile": 240}, {"date": "2024-04-30", "desktop": 454, "mobile": 380}, {"date": "2024-05-01", "desktop": 165, "mobile": 220}, {"date": "2024-05-02", "desktop": 293, "mobile": 310}, {"date": "2024-05-03", "desktop": 247, "mobile": 190}, {"date": "2024-05-04", "desktop": 385, "mobile": 420}, {"date": "2024-05-05", "desktop": 481, "mobile": 390}, {"date": "2024-05-06", "desktop": 498, "mobile": 520}, {"date": "2024-05-07", "desktop": 388, "mobile": 300}, {"date": "2024-05-08", "desktop": 149, "mobile": 210}, {"date": "2024-05-09", "desktop": 227, "mobile": 180}, {"date": "2024-05-10", "desktop": 293, "mobile": 330}, {"date": "2024-05-11", "desktop": 335, "mobile": 270}, {"date": "2024-05-12", "desktop": 197, "mobile": 240}, {"date": "2024-05-13", "desktop": 197, "mobile": 160}, {"date": "2024-05-14", "desktop": 448, "mobile": 490}, {"date": "2024-05-15", "desktop": 473, "mobile": 380}, {"date": "2024-05-16", "desktop": 338, "mobile": 400}, {"date": "2024-05-17", "desktop": 499, "mobile": 420}, {"date": "2024-05-18", "desktop": 315, "mobile": 350}, {"date": "2024-05-19", "desktop": 235, "mobile": 180}, {"date": "2024-05-20", "desktop": 177, "mobile": 230}, {"date": "2024-05-21", "desktop": 82, "mobile": 140}, {"date": "2024-05-22", "desktop": 81, "mobile": 120}, {"date": "2024-05-23", "desktop": 252, "mobile": 290}, {"date": "2024-05-24", "desktop": 294, "mobile": 220}, {"date": "2024-05-25", "desktop": 201, "mobile": 250}, {"date": "2024-05-26", "desktop": 213, "mobile": 170}, {"date": "2024-05-27", "desktop": 420, "mobile": 460}, {"date": "2024-05-28", "desktop": 233, "mobile": 190}, {"date": "2024-05-29", "desktop": 78, "mobile": 130}, {"date": "2024-05-30", "desktop": 340, "mobile": 280}, {"date": "2024-05-31", "desktop": 178, "mobile": 230}, {"date": "2024-06-01", "desktop": 178, "mobile": 200}, {"date": "2024-06-02", "desktop": 470, "mobile": 410}, {"date": "2024-06-03", "desktop": 103, "mobile": 160}, {"date": "2024-06-04", "desktop": 439, "mobile": 380}, {"date": "2024-06-05", "desktop": 88, "mobile": 140}, {"date": "2024-06-06", "desktop": 294, "mobile": 250}, {"date": "2024-06-07", "desktop": 323, "mobile": 370}, {"date": "2024-06-08", "desktop": 385, "mobile": 320}, {"date": "2024-06-09", "desktop": 438, "mobile": 480}, {"date": "2024-06-10", "desktop": 155, "mobile": 200}, {"date": "2024-06-11", "desktop": 92, "mobile": 150}, {"date": "2024-06-12", "desktop": 492, "mobile": 420}, {"date": "2024-06-13", "desktop": 81, "mobile": 130}, {"date": "2024-06-14", "desktop": 426, "mobile": 380}, {"date": "2024-06-15", "desktop": 307, "mobile": 350}, {"date": "2024-06-16", "desktop": 371, "mobile": 310}, {"date": "2024-06-17", "desktop": 475, "mobile": 520}, {"date": "2024-06-18", "desktop": 107, "mobile": 170}, {"date": "2024-06-19", "desktop": 341, "mobile": 290}, {"date": "2024-06-20", "desktop": 408, "mobile": 450}, {"date": "2024-06-21", "desktop": 169, "mobile": 210}, {"date": "2024-06-22", "desktop": 317, "mobile": 270}, {"date": "2024-06-23", "desktop": 480, "mobile": 530}, {"date": "2024-06-24", "desktop": 132, "mobile": 180}, {"date": "2024-06-25", "desktop": 141, "mobile": 190}, {"date": "2024-06-26", "desktop": 434, "mobile": 380}, {"date": "2024-06-27", "desktop": 448, "mobile": 490}, {"date": "2024-06-28", "desktop": 149, "mobile": 200}, {"date": "2024-06-29", "desktop": 103, "mobile": 160}, {"date": "2024-06-30", "desktop": 446, "mobile": 400},} var chartLineInteractiveConfig = chart.Config{ {Key: "views", Label: "Page Views"}, {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} // shortDate formats like the demo's tickFormatter: "Apr 1".func lineInteractiveShortDate(v any) string { t, _ := time.Parse("2006-01-02", v.(string)) return t.Format("Jan 2")} // longDate formats like the tooltip labelFormatter: "Apr 1, 2024".func lineInteractiveLongDate(v any) string { t, _ := time.Parse("2006-01-02", v.(string)) return t.Format("Jan 2, 2006")} // total sums one series for the header toggle buttons.func lineInteractiveTotal(series string) string { sum := 0 for _, d := range chartLineInteractiveData { sum += d[series].(int) } return lineInteractiveGroupThousands(sum)} // groupThousands formats like toLocaleString: 446760 -> "446,760".func lineInteractiveGroupThousands(v int) string { s := fmt.Sprintf("%d", v) var sb strings.Builder for i, r := range s { if i > 0 && (len(s)-i)%3 == 0 { sb.WriteRune(',') } sb.WriteRune(r) } return sb.String()} templ ChartLineInteractive() { @card.Card(card.Props{Class: "py-4 sm:py-0"}) { @card.Header(card.HeaderProps{Class: "flex flex-col items-stretch border-b p-0! sm:flex-row"}) { <div class="flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0"> @card.Title() { Line Chart - Interactive } @card.Description() { Showing total visitors for the last 3 months } </div> <div class="flex"> for _, series := range []string{"desktop", "mobile"} { <button data-active={ utils.IfElse(series == "desktop", "true", "false") } data-tui-chart-series={ series } class="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6" > <span class="text-xs text-muted-foreground"> { chartLineInteractiveConfig.Label(series) } </span> <span class="text-lg leading-none font-bold sm:text-3xl"> { lineInteractiveTotal(series) } </span> </button> } </div> } @card.Content(card.ContentProps{Class: "px-2 sm:p-6"}) { @chart.Container(chart.ContainerProps{ID: "line-interactive", Config: chartLineInteractiveConfig, Class: "aspect-auto h-[250px] w-full"}) { for _, series := range []string{"desktop", "mobile"} { <div data-tui-chart-series-panel={ series } hidden?={ series != "desktop" } style="width:100%;height:100%"> @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineInteractiveData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "date", TickMargin: 8, MinTickGap: 32, TickFormatter: lineInteractiveShortDate, }) @chart.Tooltip(chart.TooltipProps{ Content: chart.TooltipContentProps{ Class: "w-[150px]", NameKey: "views", LabelFormatter: lineInteractiveLongDate, }, }) @chart.Line(chart.LineProps{ DataKey: series, Type: "monotone", Stroke: "var(--color-" + series + ")", StrokeWidth: 2, }) } </div> } } } }}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-line-default.tsx. var chartLineDefaultData = []chart.Datum{ {"month": "January", "desktop": 186}, {"month": "February", "desktop": 305}, {"month": "March", "desktop": 237}, {"month": "April", "desktop": 73}, {"month": "May", "desktop": 209}, {"month": "June", "desktop": 214},} var chartLineDefaultConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func lineDefaultMonthShort(v any) string { return v.(string)[:3]} templ ChartLineDefault() { @card.Card() { @card.Header() { @card.Title() { Line Chart } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-default", Config: chartLineDefaultConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineDefaultData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: lineDefaultMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Line(chart.LineProps{ DataKey: "desktop", Type: chart.CurveNatural, Stroke: "var(--color-desktop)", StrokeWidth: 2, }) } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}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-line-linear.tsx. var chartLineLinearData = []chart.Datum{ {"month": "January", "desktop": 186}, {"month": "February", "desktop": 305}, {"month": "March", "desktop": 237}, {"month": "April", "desktop": 73}, {"month": "May", "desktop": 209}, {"month": "June", "desktop": 214},} var chartLineLinearConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func lineLinearMonthShort(v any) string { return v.(string)[:3]} templ ChartLineLinear() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Linear } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-linear", Config: chartLineLinearConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineLinearData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: lineLinearMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Line(chart.LineProps{ DataKey: "desktop", Type: "linear", Stroke: "var(--color-desktop)", StrokeWidth: 2, }) } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}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-line-step.tsx. var chartLineStepData = []chart.Datum{ {"month": "January", "desktop": 186}, {"month": "February", "desktop": 305}, {"month": "March", "desktop": 237}, {"month": "April", "desktop": 73}, {"month": "May", "desktop": 209}, {"month": "June", "desktop": 214},} var chartLineStepConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func lineStepMonthShort(v any) string { return v.(string)[:3]} templ ChartLineStep() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Step } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-step", Config: chartLineStepConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineStepData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: lineStepMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Line(chart.LineProps{ DataKey: "desktop", Type: "step", Stroke: "var(--color-desktop)", StrokeWidth: 2, }) } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}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-line-multiple.tsx. var chartLineMultipleData = []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 chartLineMultipleConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func lineMultipleMonthShort(v any) string { return v.(string)[:3]} templ ChartLineMultiple() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Multiple } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-multiple", Config: chartLineMultipleConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineMultipleData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: lineMultipleMonthShort, }) @chart.Tooltip(chart.TooltipProps{Cursor: chart.Bool(false)}) @chart.Line(chart.LineProps{ DataKey: "desktop", Type: "monotone", Stroke: "var(--color-desktop)", StrokeWidth: 2, }) @chart.Line(chart.LineProps{ DataKey: "mobile", Type: "monotone", Stroke: "var(--color-mobile)", StrokeWidth: 2, }) } } } @card.Footer() { <div class="flex w-full items-start gap-2 text-sm"> <div class="grid gap-2"> <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"> Showing total visitors for the last 6 months </div> </div> </div> } }}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-line-dots.tsx. var chartLineDotsData = []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 chartLineDotsConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func lineDotsMonthShort(v any) string { return v.(string)[:3]} templ ChartLineDots() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Dots } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-dots", Config: chartLineDotsConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineDotsData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: lineDotsMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Line(chart.LineProps{ DataKey: "desktop", Type: chart.CurveNatural, Stroke: "var(--color-desktop)", StrokeWidth: 2, Dot: &chart.DotProps{Fill: "var(--color-desktop)"}, ActiveDot: &chart.ActiveDotProps{R: 6}, }) } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}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-line-dots-custom.tsx. var chartLineDotsCustomData = []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 chartLineDotsCustomConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func lineDotsCustomMonthShort(v any) string { return v.(string)[:3]} templ ChartLineDotsCustom() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Custom Dots } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-dots-custom", Config: chartLineDotsCustomConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineDotsCustomData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: lineDotsCustomMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Line(chart.LineProps{ DataKey: "desktop", Type: chart.CurveNatural, Stroke: "var(--color-desktop)", StrokeWidth: 2, Dot: &chart.DotProps{ Icon: icon.GitCommitVertical(icon.Props{Class: "fill-background stroke-(--color-desktop)"}), Size: 24, }, }) } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}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-line-dots-colors.tsx. var chartLineDotsColorsData = []chart.Datum{ {"browser": "chrome", "visitors": 275, "fill": "var(--color-chrome)"}, {"browser": "safari", "visitors": 200, "fill": "var(--color-safari)"}, {"browser": "firefox", "visitors": 187, "fill": "var(--color-firefox)"}, {"browser": "edge", "visitors": 173, "fill": "var(--color-edge)"}, {"browser": "other", "visitors": 90, "fill": "var(--color-other)"},} var chartLineDotsColorsConfig = chart.Config{ {Key: "visitors", Label: "Visitors", Color: "var(--chart-2)"}, {Key: "chrome", Label: "Chrome", Color: "var(--chart-1)"}, {Key: "safari", Label: "Safari", Color: "var(--chart-2)"}, {Key: "firefox", Label: "Firefox", Color: "var(--chart-3)"}, {Key: "edge", Label: "Edge", Color: "var(--chart-4)"}, {Key: "other", Label: "Other", Color: "var(--chart-5)"},} templ ChartLineDotsColors() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Dots Colors } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-dots-colors", Config: chartLineDotsColorsConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineDotsColorsData, Margin: &chart.Margin{Top: 24, Left: 24, Right: 24}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line", NameKey: "visitors", HideLabel: true}, }) @chart.Line(chart.LineProps{ DataKey: "visitors", Type: chart.CurveNatural, Stroke: "var(--color-visitors)", StrokeWidth: 2, Dot: &chart.DotProps{R: 5, DataFill: true}, }) } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}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-line-label.tsx. var chartLineLabelData = []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 chartLineLabelConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func lineLabelMonthShort(v any) string { return v.(string)[:3]} templ ChartLineLabel() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Label } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-label", Config: chartLineLabelConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineLabelData, Margin: &chart.Margin{Top: 20, Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: lineLabelMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line"}, }) @chart.Line(chart.LineProps{ DataKey: "desktop", Type: chart.CurveNatural, Stroke: "var(--color-desktop)", StrokeWidth: 2, Dot: &chart.DotProps{Fill: "var(--color-desktop)"}, ActiveDot: &chart.ActiveDotProps{R: 6}, }) { @chart.LabelList(chart.LabelListProps{ Position: "top", Offset: 12, Class: "fill-foreground", FontSize: 12, }) } } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}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-line-label-custom.tsx. var chartLineLabelCustomData = []chart.Datum{ {"browser": "chrome", "visitors": 275, "fill": "var(--color-chrome)"}, {"browser": "safari", "visitors": 200, "fill": "var(--color-safari)"}, {"browser": "firefox", "visitors": 187, "fill": "var(--color-firefox)"}, {"browser": "edge", "visitors": 173, "fill": "var(--color-edge)"}, {"browser": "other", "visitors": 90, "fill": "var(--color-other)"},} var chartLineLabelCustomConfig = chart.Config{ {Key: "visitors", Label: "Visitors", Color: "var(--chart-2)"}, {Key: "chrome", Label: "Chrome", Color: "var(--chart-1)"}, {Key: "safari", Label: "Safari", Color: "var(--chart-2)"}, {Key: "firefox", Label: "Firefox", Color: "var(--chart-3)"}, {Key: "edge", Label: "Edge", Color: "var(--chart-4)"}, {Key: "other", Label: "Other", Color: "var(--chart-5)"},} // lineLabelCustomName resolves the config label for a data key, the// pendant of the demo's formatter reading chartConfig[value].label.func lineLabelCustomName(v any) string { return chartLineLabelCustomConfig.Label(v.(string))} templ ChartLineLabelCustom() { @card.Card() { @card.Header() { @card.Title() { Line Chart - Custom Label } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "line-label-custom", Config: chartLineLabelCustomConfig}) { @chart.LineChart(chart.LineChartProps{ AccessibilityLayer: true, Data: chartLineLabelCustomData, Margin: &chart.Margin{Top: 24, Left: 24, Right: 24}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line", NameKey: "visitors", HideLabel: true}, }) @chart.Line(chart.LineProps{ DataKey: "visitors", Type: chart.CurveNatural, Stroke: "var(--color-visitors)", StrokeWidth: 2, Dot: &chart.DotProps{Fill: "var(--color-visitors)"}, ActiveDot: &chart.ActiveDotProps{R: 6}, }) { @chart.LabelList(chart.LabelListProps{ Position: "top", Offset: 12, Class: "fill-foreground", FontSize: 12, DataKey: "browser", Formatter: lineLabelCustomName, }) } } } } @card.Footer(card.FooterProps{Class: "flex-col items-start gap-2 text-sm"}) { <div class="flex 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="leading-none text-muted-foreground"> Showing total visitors for the last 6 months </div> } }}