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 ( "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-radial-simple.tsx. var chartRadialSimpleData = []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 chartRadialSimpleConfig = 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 ChartRadialSimple() { @card.Card(card.Props{Class: "flex flex-col"}) { @card.Header(card.HeaderProps{Class: "items-center pb-0"}) { @card.Title() { Radial Chart } @card.Description() { January - June 2024 } } @card.Content(card.ContentProps{Class: "flex-1 pb-0"}) { @chart.Container(chart.ContainerProps{ID: "radial-simple", Config: chartRadialSimpleConfig, Class: "mx-auto aspect-square max-h-[250px]"}) { @chart.RadialBarChart(chart.RadialBarChartProps{ Data: chartRadialSimpleData, InnerRadius: 30, OuterRadius: 110, }) { @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true, NameKey: "browser"}, }) @chart.RadialBar(chart.RadialBarProps{ DataKey: "visitors", Background: true, }) } } } @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> } }}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-radial-label.tsx. var chartRadialLabelData = []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 chartRadialLabelConfig = 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 ChartRadialLabel() { @card.Card(card.Props{Class: "flex flex-col"}) { @card.Header(card.HeaderProps{Class: "items-center pb-0"}) { @card.Title() { Radial Chart - Label } @card.Description() { January - June 2024 } } @card.Content(card.ContentProps{Class: "flex-1 pb-0"}) { @chart.Container(chart.ContainerProps{ID: "radial-label", Config: chartRadialLabelConfig, Class: "mx-auto aspect-square max-h-[250px]"}) { @chart.RadialBarChart(chart.RadialBarChartProps{ Data: chartRadialLabelData, StartAngle: -90, EndAngle: chart.Float(380), InnerRadius: 30, OuterRadius: 110, }) { @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true, NameKey: "browser"}, }) @chart.RadialBar(chart.RadialBarProps{ DataKey: "visitors", Background: true, }) { @chart.LabelList(chart.LabelListProps{Position: "insideStart", DataKey: "browser", Class: "fill-white capitalize mix-blend-luminosity", FontSize: 11}) } } } } @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> } }}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-radial-grid.tsx. var chartRadialGridData = []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 chartRadialGridConfig = 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 ChartRadialGrid() { @card.Card(card.Props{Class: "flex flex-col"}) { @card.Header(card.HeaderProps{Class: "items-center pb-0"}) { @card.Title() { Radial Chart - Grid } @card.Description() { January - June 2024 } } @card.Content(card.ContentProps{Class: "flex-1 pb-0"}) { @chart.Container(chart.ContainerProps{ID: "radial-grid", Config: chartRadialGridConfig, Class: "mx-auto aspect-square max-h-[250px]"}) { @chart.RadialBarChart(chart.RadialBarChartProps{ Data: chartRadialGridData, InnerRadius: 30, OuterRadius: 100, }) { @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true, NameKey: "browser"}, }) @chart.PolarGrid(chart.PolarGridProps{GridType: "circle"}) @chart.RadialBar(chart.RadialBarProps{ DataKey: "visitors", }) } } } @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> } }}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-radial-text.tsx. var chartRadialTextData = []chart.Datum{ {"browser": "safari", "visitors": 200, "fill": "var(--color-safari)"},} var chartRadialTextConfig = chart.Config{ {Key: "visitors", Label: "Visitors"}, {Key: "safari", Label: "Safari", Color: "var(--chart-2)"},} // radialTextValue is the visitors of the row, like the source printing// it with toLocaleString.func radialTextValue() string { sum := chartRadialTextData[0]["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 ChartRadialText() { @card.Card(card.Props{Class: "flex flex-col"}) { @card.Header(card.HeaderProps{Class: "items-center pb-0"}) { @card.Title() { Radial Chart - Text } @card.Description() { January - June 2024 } } @card.Content(card.ContentProps{Class: "flex-1 pb-0"}) { @chart.Container(chart.ContainerProps{ID: "radial-text", Config: chartRadialTextConfig, Class: "mx-auto aspect-square max-h-[250px]"}) { @chart.RadialBarChart(chart.RadialBarChartProps{ Data: chartRadialTextData, StartAngle: 0, EndAngle: chart.Float(250), InnerRadius: 80, OuterRadius: 90, }) { @chart.PolarGrid(chart.PolarGridProps{GridType: "circle", RadialLines: chart.Bool(false), Stroke: "none", Class: "first:fill-muted last:fill-background", PolarRadius: []float64{90, 80}}) @chart.RadialBar(chart.RadialBarProps{ DataKey: "visitors", Background: true, CornerRadius: 10, }) @chart.PolarRadiusAxis(chart.PolarRadiusAxisProps{Tick: chart.Bool(false), TickLine: chart.Bool(false), AxisLine: chart.Bool(false)}) { @chart.Label(chart.LabelProps{ DominantBaseline: "middle", Spans: []chart.LabelSpan{ {Text: radialTextValue(), Class: "fill-foreground text-4xl 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> } }}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-radial-shape.tsx. var chartRadialShapeData = []chart.Datum{ {"browser": "safari", "visitors": 1260, "fill": "var(--color-safari)"},} var chartRadialShapeConfig = chart.Config{ {Key: "visitors", Label: "Visitors"}, {Key: "safari", Label: "Safari", Color: "var(--chart-2)"},} // radialShapeValue is the visitors of the row, like the source printing// it with toLocaleString.func radialShapeValue() string { sum := chartRadialShapeData[0]["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 ChartRadialShape() { @card.Card(card.Props{Class: "flex flex-col"}) { @card.Header(card.HeaderProps{Class: "items-center pb-0"}) { @card.Title() { Radial Chart - Shape } @card.Description() { January - June 2024 } } @card.Content(card.ContentProps{Class: "flex-1 pb-0"}) { @chart.Container(chart.ContainerProps{ID: "radial-shape", Config: chartRadialShapeConfig, Class: "mx-auto aspect-square max-h-[250px]"}) { @chart.RadialBarChart(chart.RadialBarChartProps{ Data: chartRadialShapeData, EndAngle: chart.Float(100), InnerRadius: 65, OuterRadius: 95, }) { @chart.PolarGrid(chart.PolarGridProps{GridType: "circle", RadialLines: chart.Bool(false), Stroke: "none", Class: "first:fill-muted last:fill-background", PolarRadius: []float64{86, 74}}) @chart.RadialBar(chart.RadialBarProps{ DataKey: "visitors", Background: true, }) @chart.PolarRadiusAxis(chart.PolarRadiusAxisProps{Tick: chart.Bool(false), TickLine: chart.Bool(false), AxisLine: chart.Bool(false)}) { @chart.Label(chart.LabelProps{ DominantBaseline: "middle", Spans: []chart.LabelSpan{ {Text: radialShapeValue(), Class: "fill-foreground text-4xl 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> } }}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-radial-stacked.tsx. var chartRadialStackedData = []chart.Datum{ {"month": "january", "mobile": 570, "desktop": 1260},} var chartRadialStackedConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} // radialStackedTotal sums the desktop and mobile visitors for the label// in the middle.func radialStackedTotal() string { sum := chartRadialStackedData[0]["desktop"].(int) + chartRadialStackedData[0]["mobile"].(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 ChartRadialStacked() { @card.Card(card.Props{Class: "flex flex-col"}) { @card.Header(card.HeaderProps{Class: "items-center pb-0"}) { @card.Title() { Radial Chart - Stacked } @card.Description() { January - June 2024 } } @card.Content(card.ContentProps{Class: "flex flex-1 items-center pb-0"}) { @chart.Container(chart.ContainerProps{ID: "radial-stacked", Config: chartRadialStackedConfig, Class: "mx-auto aspect-square w-full max-w-[250px]"}) { @chart.RadialBarChart(chart.RadialBarChartProps{ Data: chartRadialStackedData, EndAngle: chart.Float(180), InnerRadius: 80, OuterRadius: 110, }) { @chart.RadialBar(chart.RadialBarProps{ DataKey: "mobile", Fill: "var(--color-mobile)", CornerRadius: 5, StackID: "a", Class: "stroke-transparent stroke-2", }) @chart.RadialBar(chart.RadialBarProps{ DataKey: "desktop", Fill: "var(--color-desktop)", CornerRadius: 5, StackID: "a", Class: "stroke-transparent stroke-2", }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.PolarRadiusAxis(chart.PolarRadiusAxisProps{Tick: chart.Bool(false), TickLine: chart.Bool(false), AxisLine: chart.Bool(false)}) { @chart.Label(chart.LabelProps{ Spans: []chart.LabelSpan{ {Text: radialStackedTotal(), Class: "fill-foreground text-2xl font-bold", OffsetY: -16}, {Text: "Visitors", Class: "fill-muted-foreground", OffsetY: 4}, }, }) } } } } @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> } }}