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-bar-interactive.tsx. var chartBarInteractiveData = []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 chartBarInteractiveConfig = chart.Config{ {Key: "views", Label: "Page Views"}, {Key: "desktop", Label: "Desktop", Color: "var(--chart-2)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-1)"},} // shortDate formats like the demo's tickFormatter: "Apr 1".func barInteractiveShortDate(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 barInteractiveLongDate(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 barInteractiveTotal(series string) string { sum := 0 for _, d := range chartBarInteractiveData { sum += d[series].(int) } return barInteractiveGroupThousands(sum)} // groupThousands formats like toLocaleString: 446760 -> "446,760".func barInteractiveGroupThousands(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 ChartBarInteractive() { @card.Card(card.Props{Class: "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 pt-4 pb-3 sm:py-0!"> @card.Title() { Bar 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="relative z-30 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"> { chartBarInteractiveConfig.Label(series) } </span> <span class="text-lg leading-none font-bold sm:text-3xl"> { barInteractiveTotal(series) } </span> </button> } </div> } @card.Content(card.ContentProps{Class: "px-2 sm:p-6"}) { @chart.Container(chart.ContainerProps{ID: "bar-interactive", Config: chartBarInteractiveConfig, 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.BarChart(chart.BarChartProps{ AccessibilityLayer: true, Data: chartBarInteractiveData, 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: barInteractiveShortDate, }) @chart.Tooltip(chart.TooltipProps{ Content: chart.TooltipContentProps{ Class: "w-[150px]", NameKey: "views", LabelFormatter: barInteractiveLongDate, }, }) @chart.Bar(chart.BarProps{DataKey: series, Fill: "var(--color-" + series + ")"}) } </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-bar-default.tsx. var chartBarDefaultData = []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 chartBarDefaultConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func barDefaultMonthShort(v any) string { return v.(string)[:3]} templ ChartBarDefault() { @card.Card() { @card.Header() { @card.Title() { Bar Chart } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-default", Config: chartBarDefaultConfig}) { @chart.BarChart(chart.BarChartProps{ AccessibilityLayer: true, Data: chartBarDefaultData, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 10, TickFormatter: barDefaultMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Bar(chart.BarProps{DataKey: "desktop", Fill: "var(--color-desktop)", Radius: 8}) } } } @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-bar-horizontal.tsx. var chartBarHorizontalData = []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 chartBarHorizontalConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func barHorizontalMonthShort(v any) string { return v.(string)[:3]} templ ChartBarHorizontal() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Horizontal } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-horizontal", Config: chartBarHorizontalConfig}) { @chart.BarChart(chart.BarChartProps{ AccessibilityLayer: true, Data: chartBarHorizontalData, Layout: "vertical", Margin: &chart.Margin{Left: -20}, }) { @chart.XAxis(chart.XAxisProps{Type: "number", DataKey: "desktop", Hide: true}) @chart.YAxis(chart.YAxisProps{ DataKey: "month", Type: "category", TickMargin: 10, TickFormatter: barHorizontalMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Bar(chart.BarProps{DataKey: "desktop", Fill: "var(--color-desktop)", Radius: 5}) } } } @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-bar-multiple.tsx. var chartBarMultipleData = []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 chartBarMultipleConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func barMultipleMonthShort(v any) string { return v.(string)[:3]} templ ChartBarMultiple() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Multiple } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-multiple", Config: chartBarMultipleConfig}) { @chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartBarMultipleData}) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 10, TickFormatter: barMultipleMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "dashed"}, }) @chart.Bar(chart.BarProps{DataKey: "desktop", Fill: "var(--color-desktop)", Radius: 4}) @chart.Bar(chart.BarProps{DataKey: "mobile", Fill: "var(--color-mobile)", Radius: 4}) } } } @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-bar-stacked.tsx. var chartBarStackedData = []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 chartBarStackedConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func barStackedMonthShort(v any) string { return v.(string)[:3]} templ ChartBarStacked() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Stacked + Legend } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-stacked", Config: chartBarStackedConfig}) { @chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartBarStackedData}) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 10, TickFormatter: barStackedMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Legend() @chart.Bar(chart.BarProps{ DataKey: "desktop", StackID: "a", Fill: "var(--color-desktop)", Radius: []float64{0, 0, 4, 4}, }) @chart.Bar(chart.BarProps{ DataKey: "mobile", StackID: "a", Fill: "var(--color-mobile)", Radius: []float64{4, 4, 0, 0}, }) } } } @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-bar-label.tsx. var chartBarLabelData = []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 chartBarLabelConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func barLabelMonthShort(v any) string { return v.(string)[:3]} templ ChartBarLabel() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Label } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-label", Config: chartBarLabelConfig}) { @chart.BarChart(chart.BarChartProps{ AccessibilityLayer: true, Data: chartBarLabelData, Margin: &chart.Margin{Top: 20}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 10, TickFormatter: barLabelMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Bar(chart.BarProps{DataKey: "desktop", Fill: "var(--color-desktop)", Radius: 8}) { @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-bar-label-custom.tsx. var chartBarLabelCustomData = []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 chartBarLabelCustomConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-2)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"}, {Key: "label", Color: "var(--background)"},} func barLabelCustomMonthShort(v any) string { return v.(string)[:3]} templ ChartBarLabelCustom() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Custom Label } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-label-custom", Config: chartBarLabelCustomConfig}) { @chart.BarChart(chart.BarChartProps{ AccessibilityLayer: true, Data: chartBarLabelCustomData, Layout: "vertical", Margin: &chart.Margin{Right: 16}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Horizontal: chart.Bool(false)}) @chart.YAxis(chart.YAxisProps{ DataKey: "month", Type: "category", TickMargin: 10, TickFormatter: barLabelCustomMonthShort, Hide: true, }) @chart.XAxis(chart.XAxisProps{DataKey: "desktop", Type: "number", Hide: true}) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line"}, }) @chart.Bar(chart.BarProps{DataKey: "desktop", Fill: "var(--color-desktop)", Radius: 4}) { @chart.LabelList(chart.LabelListProps{ DataKey: "month", Position: "insideLeft", Offset: 8, Class: "fill-(--color-label)", FontSize: 12, }) @chart.LabelList(chart.LabelListProps{ DataKey: "desktop", Position: "right", Offset: 8, 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-bar-mixed.tsx. var chartBarMixedData = []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 chartBarMixedConfig = chart.Config{ {Key: "visitors", Label: "Visitors"}, {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)"},} // barMixedLabel resolves the config label, the pendant of the demo's// tickFormatter reading chartConfig[value].label.func barMixedLabel(v any) string { return chartBarMixedConfig.Label(v.(string))} templ ChartBarMixed() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Mixed } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-mixed", Config: chartBarMixedConfig}) { @chart.BarChart(chart.BarChartProps{ AccessibilityLayer: true, Data: chartBarMixedData, Layout: "vertical", Margin: &chart.Margin{Left: 0}, }) { @chart.YAxis(chart.YAxisProps{ DataKey: "browser", Type: "category", TickMargin: 10, TickFormatter: barMixedLabel, }) @chart.XAxis(chart.XAxisProps{DataKey: "visitors", Type: "number", Hide: true}) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Bar(chart.BarProps{DataKey: "visitors", Radius: 5}) } } } @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-bar-active.tsx. var chartBarActiveData = []chart.Datum{ {"browser": "chrome", "visitors": 187, "fill": "var(--color-chrome)"}, {"browser": "safari", "visitors": 200, "fill": "var(--color-safari)"}, {"browser": "firefox", "visitors": 275, "fill": "var(--color-firefox)"}, {"browser": "edge", "visitors": 173, "fill": "var(--color-edge)"}, {"browser": "other", "visitors": 90, "fill": "var(--color-other)"},} var chartBarActiveConfig = chart.Config{ {Key: "visitors", Label: "Visitors"}, {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)"},} // barActiveLabel resolves the config label, the pendant of the demo's// tickFormatter reading chartConfig[value].label.func barActiveLabel(v any) string { return chartBarActiveConfig.Label(v.(string))} templ ChartBarActive() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Active } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-active", Config: chartBarActiveConfig}) { @chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartBarActiveData}) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "browser", TickMargin: 10, TickFormatter: barActiveLabel, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Bar(chart.BarProps{ DataKey: "visitors", StrokeWidth: 2, Radius: 8, ActiveIndex: chart.Index(2), ActiveBar: &chart.RectangleProps{ FillOpacity: 0.8, StrokeDasharray: 4, StrokeDashoffset: 4, }, }) } } } @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" "github.com/axadrn/shadcn-templ/v2/utils") // The pendant of chart-bar-negative.tsx. var chartBarNegativeData = []chart.Datum{ {"month": "January", "visitors": 186}, {"month": "February", "visitors": 205}, {"month": "March", "visitors": -207}, {"month": "April", "visitors": 173}, {"month": "May", "visitors": -209}, {"month": "June", "visitors": 214},} var chartBarNegativeConfig = chart.Config{ {Key: "visitors", Label: "Visitors"},} templ ChartBarNegative() { @card.Card() { @card.Header() { @card.Title() { Bar Chart - Negative } @card.Description() { January - June 2024 } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "bar-negative", Config: chartBarNegativeConfig}) { @chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartBarNegativeData}) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true, HideIndicator: true}, }) @chart.Bar(chart.BarProps{DataKey: "visitors"}) { @chart.LabelList(chart.LabelListProps{ Position: "top", DataKey: "month", FillOpacity: 1, }) for _, d := range chartBarNegativeData { @chart.Cell(chart.CellProps{ Fill: utils.IfElse(d["visitors"].(int) > 0, "var(--chart-1)", "var(--chart-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> } }}