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 ( "time" "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-area-interactive.tsx. var chartAreaInteractiveData = []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 chartAreaInteractiveConfig = chart.Config{ {Key: "visitors", Label: "Visitors"}, {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} // filteredData is the time range filter: the last n days counted back// from 2024-06-30.func areaInteractiveFilteredData(days int) []chart.Datum { ref, _ := time.Parse("2006-01-02", "2024-06-30") start := ref.AddDate(0, 0, -days) var out []chart.Datum for _, d := range chartAreaInteractiveData { t, _ := time.Parse("2006-01-02", d["date"].(string)) if !t.Before(start) { out = append(out, d) } } return out} // shortDate formats like the demo's tickFormatter: "Apr 1".func areaInteractiveShortDate(v any) string { t, _ := time.Parse("2006-01-02", v.(string)) return t.Format("Jan 2")} var chartAreaInteractiveRanges = []struct { Key string Days int}{ {"90d", 90}, {"30d", 30}, {"7d", 7},} templ ChartAreaInteractive() { @card.Card(card.Props{Class: "pt-0"}) { @card.Header(card.HeaderProps{Class: "flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row"}) { <div class="grid flex-1 gap-1"> @card.Title() { Area Chart - Interactive } @card.Description() { Showing total visitors for the last 3 months } </div> @selectcomp.Select(selectcomp.Props{Value: "90d"}) { @selectcomp.Trigger(selectcomp.TriggerProps{ Class: "hidden w-[160px] rounded-lg sm:ml-auto sm:flex", Attributes: templ.Attributes{"aria-label": "Select a value", "data-tui-chart-range-select": "area-interactive"}, }) { @selectcomp.Value(selectcomp.ValueProps{Placeholder: "Last 3 months"}) } @selectcomp.Content(selectcomp.ContentProps{Class: "rounded-xl"}) { @selectcomp.Item(selectcomp.ItemProps{Value: "90d", Class: "rounded-lg"}) { Last 3 months } @selectcomp.Item(selectcomp.ItemProps{Value: "30d", Class: "rounded-lg"}) { Last 30 days } @selectcomp.Item(selectcomp.ItemProps{Value: "7d", Class: "rounded-lg"}) { Last 7 days } } } } @card.Content(card.ContentProps{Class: "px-2 pt-4 sm:px-6 sm:pt-6"}) { @chart.Container(chart.ContainerProps{ID: "area-interactive", Config: chartAreaInteractiveConfig, Class: "aspect-auto h-[250px] w-full"}) { for _, rng := range chartAreaInteractiveRanges { <div data-tui-chart-range={ rng.Key } hidden?={ rng.Key != "90d" } style="width:100%;height:100%"> @chart.AreaChart(chart.AreaChartProps{ Data: areaInteractiveFilteredData(rng.Days), }) { @chart.Defs() { @chart.LinearGradient(chart.LinearGradientProps{ID: "fillDesktop", X1: "0", Y1: "0", X2: "0", Y2: "1"}) { <stop offset="5%" stop-color="var(--color-desktop)" stop-opacity="0.8"></stop> <stop offset="95%" stop-color="var(--color-desktop)" stop-opacity="0.1"></stop> } @chart.LinearGradient(chart.LinearGradientProps{ID: "fillMobile", X1: "0", Y1: "0", X2: "0", Y2: "1"}) { <stop offset="5%" stop-color="var(--color-mobile)" stop-opacity="0.8"></stop> <stop offset="95%" stop-color="var(--color-mobile)" stop-opacity="0.1"></stop> } } @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "date", TickMargin: 8, MinTickGap: 32, TickFormatter: areaInteractiveShortDate, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{ Indicator: "dot", LabelFormatter: areaInteractiveShortDate, }, }) @chart.Area(chart.AreaProps{ DataKey: "mobile", Type: chart.CurveNatural, Fill: "url(#fillMobile)", Stroke: "var(--color-mobile)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "url(#fillDesktop)", Stroke: "var(--color-desktop)", StackID: "a", }) @chart.Legend() } </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-area-default.tsx. var chartAreaDefaultData = []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 chartAreaDefaultConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func areaDefaultMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaDefault() { @card.Card() { @card.Header() { @card.Title() { Area Chart } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-default", Config: chartAreaDefaultConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaDefaultData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaDefaultMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line"}, }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", }) } } } @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"> January - June 2024 </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-area-linear.tsx. var chartAreaLinearData = []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 chartAreaLinearConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},} func areaLinearMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaLinear() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Linear } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-linear", Config: chartAreaLinearConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaLinearData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaLinearMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "dot", HideLabel: true}, }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: "linear", Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", }) } } } @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"> January - June 2024 </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-area-step.tsx. var chartAreaStepData = []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 chartAreaStepConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)", Icon: icon.Activity()},} func areaStepMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaStep() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Step } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-step", Config: chartAreaStepConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaStepData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaStepMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{HideLabel: true}, }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: "step", Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", }) } } } @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"> January - June 2024 </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-area-legend.tsx. var chartAreaLegendData = []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 chartAreaLegendConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func areaLegendMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaLegend() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Legend } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-legend", Config: chartAreaLegendConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaLegendData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaLegendMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line"}, }) @chart.Area(chart.AreaProps{ DataKey: "mobile", Type: chart.CurveNatural, Fill: "var(--color-mobile)", FillOpacity: 0.4, Stroke: "var(--color-mobile)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", StackID: "a", }) @chart.Legend() } } } @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"> January - June 2024 </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-area-stacked.tsx. var chartAreaStackedData = []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 chartAreaStackedConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func areaStackedMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaStacked() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Stacked } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-stacked", Config: chartAreaStackedConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaStackedData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaStackedMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "dot"}, }) @chart.Area(chart.AreaProps{ DataKey: "mobile", Type: chart.CurveNatural, Fill: "var(--color-mobile)", FillOpacity: 0.4, Stroke: "var(--color-mobile)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", StackID: "a", }) } } } @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"> January - June 2024 </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-area-stacked-expand.tsx. var chartAreaStackedExpandData = []chart.Datum{ {"month": "January", "desktop": 186, "mobile": 80, "other": 45}, {"month": "February", "desktop": 305, "mobile": 200, "other": 100}, {"month": "March", "desktop": 237, "mobile": 120, "other": 150}, {"month": "April", "desktop": 73, "mobile": 190, "other": 50}, {"month": "May", "desktop": 209, "mobile": 130, "other": 100}, {"month": "June", "desktop": 214, "mobile": 140, "other": 160},} var chartAreaStackedExpandConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"}, {Key: "other", Label: "Other", Color: "var(--chart-3)"},} func areaStackedExpandMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaStackedExpand() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Stacked Expanded } @card.Description() { Showing total visitors for the last 6months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-stacked-expand", Config: chartAreaStackedExpandConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaStackedExpandData, Margin: &chart.Margin{ Left: 12, Right: 12, Top: 12, }, StackOffset: "expand", }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaStackedExpandMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line"}, }) @chart.Area(chart.AreaProps{ DataKey: "other", Type: chart.CurveNatural, Fill: "var(--color-other)", FillOpacity: 0.1, Stroke: "var(--color-other)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "mobile", Type: chart.CurveNatural, Fill: "var(--color-mobile)", FillOpacity: 0.4, Stroke: "var(--color-mobile)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", StackID: "a", }) } } } @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"> January - June 2024 </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-area-icons.tsx. var chartAreaIconsData = []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 chartAreaIconsConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)", Icon: icon.TrendingDown()}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)", Icon: icon.TrendingUp()},} func areaIconsMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaIcons() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Icons } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-icons", Config: chartAreaIconsConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaIconsData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaIconsMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{Indicator: "line"}, }) @chart.Area(chart.AreaProps{ DataKey: "mobile", Type: chart.CurveNatural, Fill: "var(--color-mobile)", FillOpacity: 0.4, Stroke: "var(--color-mobile)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", StackID: "a", }) @chart.Legend() } } } @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"> January - June 2024 </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-area-gradient.tsx. var chartAreaGradientData = []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 chartAreaGradientConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func areaGradientMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaGradient() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Gradient } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-gradient", Config: chartAreaGradientConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaGradientData, Margin: &chart.Margin{Left: 12, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaGradientMonthShort, }) @chart.Tooltip(chart.TooltipProps{ Cursor: chart.Bool(false), Content: chart.TooltipContentProps{}, }) @chart.Defs() { @chart.LinearGradient(chart.LinearGradientProps{ID: "fillDesktop", X1: "0", Y1: "0", X2: "0", Y2: "1"}) { <stop offset="5%" stop-color="var(--color-desktop)" stop-opacity="0.8"></stop> <stop offset="95%" stop-color="var(--color-desktop)" stop-opacity="0.1"></stop> } @chart.LinearGradient(chart.LinearGradientProps{ID: "fillMobile", X1: "0", Y1: "0", X2: "0", Y2: "1"}) { <stop offset="5%" stop-color="var(--color-mobile)" stop-opacity="0.8"></stop> <stop offset="95%" stop-color="var(--color-mobile)" stop-opacity="0.1"></stop> } } @chart.Area(chart.AreaProps{ DataKey: "mobile", Type: chart.CurveNatural, Fill: "url(#fillMobile)", FillOpacity: 0.4, Stroke: "var(--color-mobile)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "url(#fillDesktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", StackID: "a", }) } } } @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"> January - June 2024 </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-area-axes.tsx. var chartAreaAxesData = []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 chartAreaAxesConfig = chart.Config{ {Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"}, {Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},} func areaAxesMonthShort(v any) string { return v.(string)[:3]} templ ChartAreaAxes() { @card.Card() { @card.Header() { @card.Title() { Area Chart - Axes } @card.Description() { Showing total visitors for the last 6 months } } @card.Content() { @chart.Container(chart.ContainerProps{ID: "area-axes", Config: chartAreaAxesConfig}) { @chart.AreaChart(chart.AreaChartProps{ AccessibilityLayer: true, Data: chartAreaAxesData, Margin: &chart.Margin{Left: -20, Right: 12}, }) { @chart.CartesianGrid(chart.CartesianGridProps{Vertical: chart.Bool(false)}) @chart.XAxis(chart.XAxisProps{ DataKey: "month", TickMargin: 8, TickFormatter: areaAxesMonthShort, }) @chart.YAxis(chart.YAxisProps{ TickMargin: 8, TickCount: 3, }) @chart.Tooltip(chart.TooltipProps{Cursor: chart.Bool(false)}) @chart.Area(chart.AreaProps{ DataKey: "mobile", Type: chart.CurveNatural, Fill: "var(--color-mobile)", FillOpacity: 0.4, Stroke: "var(--color-mobile)", StackID: "a", }) @chart.Area(chart.AreaProps{ DataKey: "desktop", Type: chart.CurveNatural, Fill: "var(--color-desktop)", FillOpacity: 0.4, Stroke: "var(--color-desktop)", StackID: "a", }) } } } @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"> January - June 2024 </div> </div> </div> } }}