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

Tooltip

package charts

import (
	"time"

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

// The pendant of chart-tooltip-default.tsx.

var chartTooltipDefaultData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipDefaultConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipDefaultWeekday shortens the date to the weekday, like the source
// printing it with toLocaleDateString and the short weekday.
func tooltipDefaultWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

templ ChartTooltipDefault() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - Default
			}
			@card.Description() {
				Default tooltip with ChartTooltipContent.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-default", Config: chartTooltipDefaultConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipDefaultData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipDefaultWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content:      chart.TooltipContentProps{},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"time"

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

// The pendant of chart-tooltip-indicator-line.tsx.

var chartTooltipIndicatorLineData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipIndicatorLineConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipIndicatorLineWeekday shortens the date to the weekday, like the
// source printing it with toLocaleDateString and the short weekday.
func tooltipIndicatorLineWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

templ ChartTooltipIndicatorLine() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - Line Indicator
			}
			@card.Description() {
				Tooltip with line indicator.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-indicator-line", Config: chartTooltipIndicatorLineConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipIndicatorLineData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipIndicatorLineWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content:      chart.TooltipContentProps{Indicator: "line"},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"time"

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

// The pendant of chart-tooltip-indicator-none.tsx.

var chartTooltipIndicatorNoneData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipIndicatorNoneConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipIndicatorNoneWeekday shortens the date to the weekday, like the
// source printing it with toLocaleDateString and the short weekday.
func tooltipIndicatorNoneWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

templ ChartTooltipIndicatorNone() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - No Indicator
			}
			@card.Description() {
				Tooltip with no indicator.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-indicator-none", Config: chartTooltipIndicatorNoneConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipIndicatorNoneData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipIndicatorNoneWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content:      chart.TooltipContentProps{HideIndicator: true},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"time"

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

// The pendant of chart-tooltip-label-custom.tsx.

var chartTooltipLabelCustomData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipLabelCustomConfig = chart.Config{
	{Key: "activities", Label: "Activities"},
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipLabelCustomWeekday shortens the date to the weekday, like the
// source printing it with toLocaleDateString and the short weekday.
func tooltipLabelCustomWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

templ ChartTooltipLabelCustom() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - Custom label
			}
			@card.Description() {
				Tooltip with custom label from chartConfig.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-label-custom", Config: chartTooltipLabelCustomConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipLabelCustomData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipLabelCustomWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content:      chart.TooltipContentProps{LabelKey: "activities", Indicator: "line"},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"time"

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

// The pendant of chart-tooltip-label-formatter.tsx.

var chartTooltipLabelFormatterData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipLabelFormatterConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipLabelFormatterWeekday shortens the date to the weekday, like the
// source printing it with toLocaleDateString and the short weekday.
func tooltipLabelFormatterWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

// tooltipLabelFormatterDate spells the date out, like the source's
// labelFormatter with the long month, numeric day and year.
func tooltipLabelFormatterDate(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("January 2, 2006")
}

templ ChartTooltipLabelFormatter() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - Label Formatter
			}
			@card.Description() {
				Tooltip with label formatter.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-label-formatter", Config: chartTooltipLabelFormatterConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipLabelFormatterData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipLabelFormatterWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content:      chart.TooltipContentProps{LabelFormatter: tooltipLabelFormatterDate},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"time"

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

// The pendant of chart-tooltip-label-none.tsx.

var chartTooltipLabelNoneData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipLabelNoneConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipLabelNoneWeekday shortens the date to the weekday, like the
// source printing it with toLocaleDateString and the short weekday.
func tooltipLabelNoneWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

templ ChartTooltipLabelNone() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - No Label
			}
			@card.Description() {
				Tooltip with no label.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-label-none", Config: chartTooltipLabelNoneConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipLabelNoneData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipLabelNoneWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content:      chart.TooltipContentProps{HideIndicator: true, HideLabel: true},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"fmt"
	"time"

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

// The pendant of chart-tooltip-formatter.tsx.

var chartTooltipFormatterData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipFormatterConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipFormatterWeekday shortens the date to the weekday, like the
// source printing it with toLocaleDateString and the short weekday.
func tooltipFormatterWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

// tooltipFormatterRow is the formatter of the source: the config label and
// the value with a kcal unit.
templ tooltipFormatterRow(value any, name string, item chart.Datum, index int) {
	<div class="flex min-w-[130px] items-center text-xs text-muted-foreground">
		{ chartTooltipFormatterConfig.Label(name) }
		<div class="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
			{ fmt.Sprintf("%v", value) }
			<span class="font-normal text-muted-foreground">kcal</span>
		</div>
	</div>
}

templ ChartTooltipFormatter() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - Formatter
			}
			@card.Description() {
				Tooltip with custom formatter .
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-formatter", Config: chartTooltipFormatterConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipFormatterData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipFormatterWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content: chart.TooltipContentProps{
							HideLabel: true,
							Formatter: tooltipFormatterRow,
						},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"time"

	"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-tooltip-icons.tsx.

var chartTooltipIconsData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipIconsConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)", Icon: icon.Footprints()},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)", Icon: icon.Waves()},
}

// tooltipIconsWeekday shortens the date to the weekday, like the source
// printing it with toLocaleDateString and the short weekday.
func tooltipIconsWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

templ ChartTooltipIcons() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - Icons
			}
			@card.Description() {
				Tooltip with icons.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-icons", Config: chartTooltipIconsConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipIconsData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipIconsWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content:      chart.TooltipContentProps{HideLabel: true},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Tooltip

package charts

import (
	"fmt"
	"time"

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

// The pendant of chart-tooltip-advanced.tsx.

var chartTooltipAdvancedData = []chart.Datum{
	{"date": "2024-07-15", "running": 450, "swimming": 300},
	{"date": "2024-07-16", "running": 380, "swimming": 420},
	{"date": "2024-07-17", "running": 520, "swimming": 120},
	{"date": "2024-07-18", "running": 140, "swimming": 550},
	{"date": "2024-07-19", "running": 600, "swimming": 350},
	{"date": "2024-07-20", "running": 480, "swimming": 400},
}

var chartTooltipAdvancedConfig = chart.Config{
	{Key: "running", Label: "Running", Color: "var(--chart-1)"},
	{Key: "swimming", Label: "Swimming", Color: "var(--chart-2)"},
}

// tooltipAdvancedWeekday shortens the date to the weekday, like the
// source printing it with toLocaleDateString and the short weekday.
func tooltipAdvancedWeekday(v any) string {
	t, err := time.Parse("2006-01-02", v.(string))
	if err != nil {
		return v.(string)
	}
	return t.Format("Mon")
}

// tooltipAdvancedRow is the formatter of the source: a color swatch, the
// config label, the value with a kcal unit and the total after the last
// item.
templ tooltipAdvancedRow(value any, name string, item chart.Datum, index int) {
	<div
		class="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
		style={ templ.SafeCSS("--color-bg: var(--color-" + name + ")") }
	></div>
	{ chartTooltipAdvancedConfig.Label(name) }
	<div class="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
		{ fmt.Sprintf("%v", value) }
		<span class="font-normal text-muted-foreground">kcal</span>
	</div>
	if index == 1 {
		<div class="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
			Total
			<div class="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
				{ fmt.Sprintf("%d", item["running"].(int)+item["swimming"].(int)) }
				<span class="font-normal text-muted-foreground">kcal</span>
			</div>
		</div>
	}
}

templ ChartTooltipAdvanced() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Tooltip - Advanced
			}
			@card.Description() {
				Tooltip with custom formatter and total.
			}
		}
		@card.Content() {
			@chart.Container(chart.ContainerProps{ID: "tooltip-advanced", Config: chartTooltipAdvancedConfig}) {
				@chart.BarChart(chart.BarChartProps{AccessibilityLayer: true, Data: chartTooltipAdvancedData}) {
					@chart.XAxis(chart.XAxisProps{
						DataKey:       "date",
						TickMargin:    10,
						TickFormatter: tooltipAdvancedWeekday,
					})
					@chart.Bar(chart.BarProps{
						DataKey: "running",
						StackID: "a",
						Fill:    "var(--color-running)",
						Radius:  []float64{0, 0, 4, 4},
					})
					@chart.Bar(chart.BarProps{
						DataKey: "swimming",
						StackID: "a",
						Fill:    "var(--color-swimming)",
						Radius:  []float64{4, 4, 0, 0},
					})
					@chart.Tooltip(chart.TooltipProps{
						Content: chart.TooltipContentProps{
							HideLabel: true,
							Class:     "w-[180px]",
							Formatter: tooltipAdvancedRow,
						},
						Cursor:       chart.Bool(false),
						DefaultIndex: chart.Index(1),
					})
				}
			}
		}
	}
}

Beautiful Charts & Graphs

tooltip Charts