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

Pie 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-pie-simple.tsx.

var chartPieSimpleData = []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 chartPieSimpleConfig = 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)"},
}

templ ChartPieSimple() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-simple", Config: chartPieSimpleConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.Pie(chart.PieProps{Data: chartPieSimpleData, DataKey: "visitors", NameKey: "browser"})
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie 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-pie-separator-none.tsx.

var chartPieSeparatorNoneData = []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 chartPieSeparatorNoneConfig = 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)"},
}

templ ChartPieSeparatorNone() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Separator None
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-separator-none", Config: chartPieSeparatorNoneConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.Pie(chart.PieProps{
						Data:    chartPieSeparatorNoneData,
						DataKey: "visitors",
						NameKey: "browser",
						Stroke:  "0",
					})
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie 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-pie-label.tsx.

var chartPieLabelData = []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 chartPieLabelConfig = 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)"},
}

templ ChartPieLabel() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Label
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-label", Config: chartPieLabelConfig, Class: "mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.Pie(chart.PieProps{
						Data:    chartPieLabelData,
						DataKey: "visitors",
						Label:   &chart.PieLabelProps{},
						NameKey: "browser",
					})
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie 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-pie-label-custom.tsx.

var chartPieLabelCustomData = []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 chartPieLabelCustomConfig = 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)"},
}

templ ChartPieLabelCustom() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Custom Label
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-label-custom", Config: chartPieLabelCustomConfig, Class: "mx-auto aspect-square max-h-[250px] px-0"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Content: chart.TooltipContentProps{NameKey: "visitors", HideLabel: true},
					})
					@chart.Pie(chart.PieProps{
						Data:      chartPieLabelCustomData,
						DataKey:   "visitors",
						LabelLine: chart.Bool(false),
						Label:     &chart.PieLabelProps{Fill: "var(--foreground)"},
						NameKey:   "browser",
					})
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie 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-pie-label-list.tsx.

var chartPieLabelListData = []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 chartPieLabelListConfig = 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)"},
}

// pieLabelListName resolves the config label, the pendant of the demo's
// formatter reading chartConfig[value].label.
func pieLabelListName(v any) string {
	return chartPieLabelListConfig.Label(v.(string))
}

templ ChartPieLabelList() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Label List
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-label-list", Config: chartPieLabelListConfig, Class: "mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Content: chart.TooltipContentProps{NameKey: "visitors", HideLabel: true},
					})
					@chart.Pie(chart.PieProps{Data: chartPieLabelListData, DataKey: "visitors"}) {
						@chart.LabelList(chart.LabelListProps{
							DataKey:   "browser",
							Class:     "fill-background",
							FontSize:  12,
							Formatter: pieLabelListName,
						})
					}
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie Chart

package charts

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

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

var chartPieLegendData = []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 chartPieLegendConfig = 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)"},
}

templ ChartPieLegend() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Legend
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-legend", Config: chartPieLegendConfig, Class: "mx-auto aspect-square max-h-[300px]"}) {
				@chart.PieChart() {
					@chart.Pie(chart.PieProps{Data: chartPieLegendData, DataKey: "visitors"})
					@chart.Legend(chart.LegendProps{
						NameKey: "browser",
						Class:   "-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center",
					})
				}
			}
		}

	}
}

Pie 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-pie-donut.tsx.

var chartPieDonutData = []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 chartPieDonutConfig = 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)"},
}

templ ChartPieDonut() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Donut
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-donut", Config: chartPieDonutConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.Pie(chart.PieProps{
						Data:        chartPieDonutData,
						DataKey:     "visitors",
						NameKey:     "browser",
						InnerRadius: 60,
					})
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie 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-pie-donut-active.tsx.

var chartPieDonutActiveData = []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 chartPieDonutActiveConfig = 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)"},
}

templ ChartPieDonutActive() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Donut Active
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-donut-active", Config: chartPieDonutActiveConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.Pie(chart.PieProps{
						Data:        chartPieDonutActiveData,
						DataKey:     "visitors",
						NameKey:     "browser",
						InnerRadius: 60,
						StrokeWidth: 5,
						ActiveIndex: chart.Index(0),
						ActiveShape: []chart.SectorProps{
							{OuterRadius: 10},
						},
					})
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie Chart

package charts

import (
	"fmt"
	"strings"

	"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-pie-donut-text.tsx.

var chartPieDonutTextData = []chart.Datum{
	{"browser": "chrome", "visitors": 275, "fill": "var(--color-chrome)"},
	{"browser": "safari", "visitors": 200, "fill": "var(--color-safari)"},
	{"browser": "firefox", "visitors": 287, "fill": "var(--color-firefox)"},
	{"browser": "edge", "visitors": 173, "fill": "var(--color-edge)"},
	{"browser": "other", "visitors": 190, "fill": "var(--color-other)"},
}

var chartPieDonutTextConfig = 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)"},
}

// pieDonutTextTotal sums the visitors for the center label.
func pieDonutTextTotal() string {
	sum := 0
	for _, d := range chartPieDonutTextData {
		sum += d["visitors"].(int)
	}
	s := fmt.Sprintf("%d", sum)
	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 ChartPieDonutText() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Donut with Text
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-donut-text", Config: chartPieDonutTextConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Cursor:  chart.Bool(false),
						Content: chart.TooltipContentProps{HideLabel: true},
					})
					@chart.Pie(chart.PieProps{
						Data:        chartPieDonutTextData,
						DataKey:     "visitors",
						NameKey:     "browser",
						InnerRadius: 60,
						StrokeWidth: 5,
					}) {
						@chart.Label(chart.LabelProps{
							DominantBaseline: "middle",
							Spans: []chart.LabelSpan{
								{Text: pieDonutTextTotal(), Class: "fill-foreground text-3xl font-bold"},
								{Text: "Visitors", Class: "fill-muted-foreground", OffsetY: 24},
							},
						})
					}
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie 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-pie-stacked.tsx.

var chartPieStackedDesktopData = []chart.Datum{
	{"month": "january", "desktop": 186, "fill": "var(--color-january)"},
	{"month": "february", "desktop": 305, "fill": "var(--color-february)"},
	{"month": "march", "desktop": 237, "fill": "var(--color-march)"},
	{"month": "april", "desktop": 173, "fill": "var(--color-april)"},
	{"month": "may", "desktop": 209, "fill": "var(--color-may)"},
}

var chartPieStackedMobileData = []chart.Datum{
	{"month": "january", "mobile": 80, "fill": "var(--color-january)"},
	{"month": "february", "mobile": 200, "fill": "var(--color-february)"},
	{"month": "march", "mobile": 120, "fill": "var(--color-march)"},
	{"month": "april", "mobile": 190, "fill": "var(--color-april)"},
	{"month": "may", "mobile": 130, "fill": "var(--color-may)"},
}

var chartPieStackedConfig = chart.Config{
	{Key: "visitors", Label: "Visitors"},
	{Key: "desktop", Label: "Desktop"},
	{Key: "mobile", Label: "Mobile"},
	{Key: "january", Label: "January", Color: "var(--chart-1)"},
	{Key: "february", Label: "February", Color: "var(--chart-2)"},
	{Key: "march", Label: "March", Color: "var(--chart-3)"},
	{Key: "april", Label: "April", Color: "var(--chart-4)"},
	{Key: "may", Label: "May", Color: "var(--chart-5)"},
}

templ ChartPieStacked() {
	@card.Card(card.Props{Class: "flex flex-col"}) {
		@card.Header(card.HeaderProps{Class: "items-center pb-0"}) {
			@card.Title() {
				Pie Chart - Stacked
			}
			@card.Description() {
				January - June 2024
			}
		}
		@card.Content(card.ContentProps{Class: "flex-1 pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-stacked", Config: chartPieStackedConfig, Class: "mx-auto aspect-square max-h-[250px]"}) {
				@chart.PieChart() {
					@chart.Tooltip(chart.TooltipProps{
						Content: chart.TooltipContentProps{
							LabelKey:  "visitors",
							NameKey:   "month",
							Indicator: "line",
						},
					})
					@chart.Pie(chart.PieProps{
						Data:        chartPieStackedDesktopData,
						DataKey:     "desktop",
						OuterRadius: 60,
					})
					@chart.Pie(chart.PieProps{
						Data:        chartPieStackedMobileData,
						DataKey:     "mobile",
						InnerRadius: 70,
						OuterRadius: 90,
					})
				}
			}
		}
		@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="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		}
	}
}

Pie Chart

package charts

import (
	"fmt"
	"strings"

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

// The pendant of chart-pie-interactive.tsx.

var chartPieInteractiveData = []chart.Datum{
	{"month": "january", "desktop": 186, "fill": "var(--color-january)"},
	{"month": "february", "desktop": 305, "fill": "var(--color-february)"},
	{"month": "march", "desktop": 237, "fill": "var(--color-march)"},
	{"month": "april", "desktop": 173, "fill": "var(--color-april)"},
	{"month": "may", "desktop": 209, "fill": "var(--color-may)"},
}

var chartPieInteractiveConfig = chart.Config{
	{Key: "visitors", Label: "Visitors"},
	{Key: "desktop", Label: "Desktop"},
	{Key: "mobile", Label: "Mobile"},
	{Key: "january", Label: "January", Color: "var(--chart-1)"},
	{Key: "february", Label: "February", Color: "var(--chart-2)"},
	{Key: "march", Label: "March", Color: "var(--chart-3)"},
	{Key: "april", Label: "April", Color: "var(--chart-4)"},
	{Key: "may", Label: "May", Color: "var(--chart-5)"},
}

// pieInteractiveFormat formats like toLocaleString.
func pieInteractiveFormat(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 ChartPieInteractive() {
	// Like shadcn, the card carries the chart id and its own style block
	// so the select swatches can use the --color variables too.
	@card.Card(card.Props{Class: "flex flex-col", Attributes: templ.Attributes{"data-chart": "pie-interactive"}}) {
		@chart.Style(chart.StyleProps{ID: "pie-interactive", Config: chartPieInteractiveConfig})
		@card.Header(card.HeaderProps{Class: "flex-row items-start space-y-0 pb-0"}) {
			<div class="grid gap-1">
				@card.Title() {
					Pie Chart - Interactive
				}
				@card.Description() {
					January - June 2024
				}
			</div>
			@selectcomp.Select(selectcomp.Props{Value: "january"}) {
				@selectcomp.Trigger(selectcomp.TriggerProps{
					Class:      "ml-auto h-7 w-[130px] rounded-lg pl-2.5",
					Attributes: templ.Attributes{"aria-label": "Select a value", "data-tui-chart-month-select": "pie-interactive"},
				}) {
					@selectcomp.Value(selectcomp.ValueProps{Placeholder: "Select month"})
				}
				@selectcomp.Content(selectcomp.ContentProps{Align: selectcomp.AlignEnd, Class: "rounded-xl"}) {
					for _, d := range chartPieInteractiveData {
						{{ month := d["month"].(string) }}
						@selectcomp.Item(selectcomp.ItemProps{Value: month, Class: "rounded-lg [&_span]:flex"}) {
							<div class="flex items-center gap-2 text-xs">
								<span
									class="flex h-3 w-3 shrink-0 rounded-xs"
									style={ "background-color:var(--color-" + month + ")" }
								></span>
								{ chartPieInteractiveConfig.Label(month) }
							</div>
						}
					}
				}
			}
		}
		@card.Content(card.ContentProps{Class: "flex flex-1 justify-center pb-0"}) {
			@chart.Container(chart.ContainerProps{ID: "pie-interactive", Config: chartPieInteractiveConfig, Class: "mx-auto aspect-square w-full max-w-[300px]"}) {
				for i, d := range chartPieInteractiveData {
					<div data-tui-chart-month={ d["month"].(string) } hidden?={ i != 0 } style="width:100%;height:100%">
						@chart.PieChart() {
							@chart.Tooltip(chart.TooltipProps{
								Cursor:  chart.Bool(false),
								Content: chart.TooltipContentProps{HideLabel: true},
							})
							@chart.Pie(chart.PieProps{
								Data:        chartPieInteractiveData,
								DataKey:     "desktop",
								NameKey:     "month",
								InnerRadius: 60,
								StrokeWidth: 5,
								ActiveIndex: chart.Index(i),
								ActiveShape: []chart.SectorProps{
									{OuterRadius: 10},
									{InnerRadius: 12, OuterRadius: 25},
								},
							}) {
								@chart.Label(chart.LabelProps{
									DominantBaseline: "middle",
									Spans: []chart.LabelSpan{
										{Text: pieInteractiveFormat(d["desktop"].(int)), Class: "fill-foreground text-3xl font-bold"},
										{Text: "Visitors", Class: "fill-muted-foreground", OffsetY: 24},
									},
								})
							}
						}
					</div>
				}
			}
		}
	}
}

Beautiful Charts & Graphs

pie Charts