T templcn/ui
Componentchart

Chart

Beautiful charts built with TanStack Charts, server rendering, and SVG marks.

Preview

Beautiful charts built with TanStack Charts, server rendering, and SVG marks.

Installation

Add this component to your project using the CLI.

templcn add chart

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.ChartContainer(ui.ChartContainerProps{
  Engine: "tanstack",
  Data: `{"type":"line","data":[{"label":"Jan","revenue":42},{"label":"Feb","revenue":58}],"series":[{"key":"revenue","label":"Revenue"}]}`,
  Config: `{"revenue":{"label":"Revenue","color":"var(--chart-1)"}}`,
  InitialHeight: 240,
})

Composition

Use these parts together to build the component.

ChartContainer

Examples

Named examples and common variations.

Default

Interactive chart container.

API Reference
PropTypeDefaultDescription
Enginestring"tanstack"Charting engine identifier.
Datastring""JSON data payload.
Configstring""Series colors and labels configuration.
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type ChartContainerProps struct {
	DOMProps
	Config        string
	Data          string
	Library       string
	Series        string
	Engine        string
	AriaLabel     string
	InitialWidth  int
	InitialHeight int
}

func ChartContainer(props ChartContainerProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		attrs := attrsFromDOMProps(props.DOMProps, "chart-container", "relative w-full")
		attrs["role"] = "img"
		if props.Config != "" {
			attrs["data-config"] = props.Config
		}
		if props.Data != "" {
			attrs["data-data"] = props.Data
		}
		if props.Library != "" {
			attrs["data-library"] = props.Library
		}
		if props.Series != "" {
			attrs["data-series"] = props.Series
		}
		if props.Engine != "" {
			attrs["data-engine"] = props.Engine
		}
		if props.AriaLabel != "" {
			attrs["aria-label"] = props.AriaLabel
		}
		if props.InitialWidth > 0 {
			attrs["data-initial-width"] = props.InitialWidth
		}
		if props.InitialHeight > 0 {
			attrs["data-initial-height"] = props.InitialHeight
		}
		return renderElement(ctx, w, "div", attrs, templ.GetChildren(ctx))
	})
}

func ChartStyle(props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "style", attrsFromDOMProps(props, "chart-style", ""), templ.GetChildren(ctx))
	})
}
func ChartTooltip(props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "div", attrsFromDOMProps(props, "chart-tooltip", ""), templ.GetChildren(ctx))
	})
}
func ChartTooltipContent(props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "div", attrsFromDOMProps(props, "chart-tooltip-content", "rounded-md border bg-background p-2 text-xs shadow"), templ.GetChildren(ctx))
	})
}
func ChartLegend(props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "div", attrsFromDOMProps(props, "chart-legend", "flex flex-wrap gap-2"), templ.GetChildren(ctx))
	})
}
func ChartLegendContent(props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "div", attrsFromDOMProps(props, "chart-legend-content", ""), templ.GetChildren(ctx))
	})
}
Next: Checkbox