Chart

Beautiful charts. Built using Chart.js.

Source Tailwind CSS JavaScript

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartDefault() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantBar,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{12, 19, 12, 5, 2, 3},
						},
					},
				},
			})
		}
	}
}

Installation

templui add chart

Load the script once in your layout:

<head>
  @chart.Script()
</head>

Examples

Bar Chart - Multiple

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartBarMultiple() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantBar,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Label: "Mobile",
							Data:  []float64{12, 19, 12, 5, 2, 3},
						},
						{
							Label: "Desktop",
							Data:  []float64{3, 9, 18, 3, 21, 13},
						},
					},
				},
			})
		}
	}
}

Bar Chart - Horizontal

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartBarHorizontal() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantBar,
				Horizontal:  true,
				ShowXGrid:   true,
				ShowYLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{12, 19, 12, 5, 2, 3},
						},
					},
				},
			})
		}
	}
}

Bar Chart - Negative

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartBarNegative() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantBar,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{12, 19, -12, 5, -2, 3},
						},
					},
				},
			})
		}
	}
}

Bar Chart - Stacked

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartBarStacked() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantBar,
				ShowYGrid:   true,
				ShowXLabels: true,
				Stacked:     true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Label: "Mobile",
							Data:  []float64{12, 19, 12, 5, 2, 3},
						},
						{
							Label: "Desktop",
							Data:  []float64{3, 9, 18, 3, 21, 13},
						},
					},
				},
			})
		}
	}
}

Line Chart

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartLine() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:    []float64{12, 3, 9, 3, 12, 7},
							Tension: 0.5,
						},
					},
				},
			})
		}
	}
}

Line Chart - Linear

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartLineLinear() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{12, 3, 9, 3, 12, 7},
						},
					},
				},
			})
		}
	}
}

Line Chart - Step

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartLineStep() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:    []float64{12, 3, 9, 3, 12, 7},
							Stepped: true,
						},
					},
				},
			})
		}
	}
}

Line Chart - Multiple

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartLineMultiple() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Label:   "Mobile",
							Data:    []float64{12, 3, 9, 3, 12, 7},
							Tension: 0.5,
						},
						{
							Label:   "Desktop",
							Data:    []float64{7, 14, 12, 21, 2, 9},
							Tension: 0.5,
						},
					},
				},
			})
		}
	}
}

RawConfig - Mixed Chart

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartRawConfig() {
	@card.Card(card.Props{Class: "w-full max-w-3xl"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Class: "h-80",
				RawConfig: map[string]any{
					"type": "bar",
					"data": map[string]any{
						"labels": []string{"Jan", "Feb", "Mar", "Apr", "May", "Jun"},
						"datasets": []map[string]any{
							{
								"type":            "bar",
								"label":           "Revenue",
								"data":            []float64{18, 22, 19, 27, 31, 29},
								"backgroundColor": "rgba(14, 165, 233, 0.25)",
								"borderColor":     "rgba(14, 165, 233, 1)",
								"borderWidth":     1,
								"borderRadius":    8,
								"yAxisID":         "y",
							},
							{
								"type":                 "line",
								"label":                "Conversion Rate",
								"data":                 []float64{2.4, 2.8, 2.6, 3.1, 3.6, 3.4},
								"borderColor":          "rgba(249, 115, 22, 1)",
								"backgroundColor":      "rgba(249, 115, 22, 0.18)",
								"pointBackgroundColor": "rgba(249, 115, 22, 1)",
								"pointBorderColor":     "rgba(249, 115, 22, 1)",
								"pointRadius":          4,
								"pointHoverRadius":     6,
								"tension":              0.35,
								"fill":                 true,
								"yAxisID":              "y1",
							},
						},
					},
					"options": map[string]any{
						"responsive":          true,
						"maintainAspectRatio": false,
						"interaction": map[string]any{
							"mode":      "index",
							"intersect": false,
						},
						"plugins": map[string]any{
							"legend": map[string]any{
								"position": "bottom",
							},
							"title": map[string]any{
								"display": true,
								"text":    "RawConfig Mixed Chart with Dual Axes",
							},
						},
						"scales": map[string]any{
							"y": map[string]any{
								"beginAtZero": true,
								"title": map[string]any{
									"display": true,
									"text":    "Revenue (kEUR)",
								},
							},
							"y1": map[string]any{
								"beginAtZero": true,
								"position":    "right",
								"grid": map[string]any{
									"drawOnChartArea": false,
								},
								"title": map[string]any{
									"display": true,
									"text":    "Conversion Rate (%)",
								},
							},
						},
					},
				},
			})
		}
	}
}

Area Chart

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartArea() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:        []float64{3, 9, 3, 12, 7, 8},
							Tension:     0.5,
							BorderWidth: 1,
							Fill:        true,
						},
					},
				},
			})
		}
	}
}

Area Chart - Linear

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartAreaLinear() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:        []float64{3, 9, 3, 12, 7, 8},
							BorderWidth: 1,
							Fill:        true,
						},
					},
				},
			})
		}
	}
}

Area Chart - Step

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartAreaStep() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:        []float64{3, 9, 3, 12, 7, 8},
							BorderWidth: 1,
							Fill:        true,
							Stepped:     true,
						},
					},
				},
			})
		}
	}
}

Area Chart - Stacked

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartAreaStacked() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:     chart.VariantLine,
				ShowYGrid:   true,
				ShowXLabels: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:        []float64{3, 9, 3, 12, 7, 8},
							BorderWidth: 1,
							Fill:        true,
							Tension:     0.5,
							Label:       "Mobile",
						},
						{
							Data:        []float64{7, 16, 5, 20, 14, 15},
							BorderWidth: 1,
							Fill:        true,
							Tension:     0.5,
							Label:       "Mobile",
						},
					},
				},
			})
		}
	}
}

Pie Chart

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartPie() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant: chart.VariantPie,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{3, 9, 3, 12, 7, 8},
						},
					},
				},
			})
		}
	}
}

Pie Chart - Stacked

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartPieStacked() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant: chart.VariantPie,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:  []float64{3, 9, 3, 12, 7, 8},
							Label: "Mobile",
						},
						{
							Data:  []float64{7, 16, 5, 20, 14, 15},
							Label: "Desktop",
						},
					},
				},
			})
		}
	}
}

Pie Chart - Legend

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartPieLegend() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:    chart.VariantPie,
				ShowLegend: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{7, 16, 5, 20, 14, 15},
						},
					},
				},
			})
		}
	}
}

Doughnut Chart

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartDoughnut() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant: chart.VariantDoughnut,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{7, 16, 5, 20, 14, 15},
						},
					},
				},
			})
		}
	}
}

Doughnut Chart - Stacked

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartDoughnutStacked() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant: chart.VariantDoughnut,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:  []float64{3, 9, 3, 12, 7, 8},
							Label: "Mobile",
						},
						{
							Data:  []float64{7, 16, 5, 20, 14, 15},
							Label: "Desktop",
						},
					},
				},
			})
		}
	}
}

Doughnut Chart - Legend

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartDoughnutLegend() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant:    chart.VariantDoughnut,
				ShowLegend: true,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:  []float64{3, 9, 3, 12, 7, 8},
							Label: "Mobile",
						},
					},
				},
			})
		}
	}
}

Radar Chart

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ ChartRadar() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant: chart.VariantRadar,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data: []float64{3, 9, 3, 12, 7, 8},
						},
					},
				},
			})
		}
	}
}

Radar Chart - Stacked

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/chart"
)

templ CharRadarStacked() {
	@card.Card(card.Props{Class: "max-w-sm"}) {
		@card.Content() {
			@chart.Chart(chart.Props{
				Variant: chart.VariantRadar,
				Data: chart.Data{
					Labels: []string{"Jan", "Feb", "March", "April", "May", "June"},
					Datasets: []chart.Dataset{
						{
							Data:  []float64{15, 9, 3, 12, 7, 8},
							Label: "Mobile",
						},
						{
							Data:  []float64{7, 16, 5, 20, 14, 15},
							Label: "Desktop",
						},
					},
				},
			})
		}
	}
}

API Reference

Required parameter

Hover for description

Chart

Main chart component that renders various chart types.

Name	Type	Default
`ID` Unique identifier for the chart element	`string`	`chart-{randomID}`
`Variant` Type of chart to render	`Variant`	`-`
`Data` Chart data configuration including labels and datasets	`Data`	`-`
`Options` Chart configuration options	`Options`	`{}`
`RawConfig` Passes a JSON-serializable Chart.js config through directly and bypasses the helper props	`map[string]any`	`nil`
`ShowLegend` Whether to display the chart legend	`bool`	`false`
`ShowXAxis` Whether to display the X-axis	`bool`	`false`
`ShowYAxis` Whether to display the Y-axis	`bool`	`false`
`ShowXLabels` Whether to display X-axis labels	`bool`	`false`
`ShowYLabels` Whether to display Y-axis labels	`bool`	`false`
`ShowXGrid` Whether to display X-axis grid lines	`bool`	`false`
`ShowYGrid` Whether to display Y-axis grid lines	`bool`	`false`
`Horizontal` Whether to render the chart horizontally	`bool`	`false`
`Stacked` Whether to stack chart elements	`bool`	`false`
`YMin` Minimum value for the Y-axis scale	`*float64`	`nil`
`YMax` Maximum value for the Y-axis scale	`*float64`	`nil`
`BeginAtZero` Whether the Y-axis should start at zero. Defaults to true if not specified	`*bool`	`nil (true)`
`Class` Additional CSS classes to apply to the chart container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the chart container	`templ.Attributes`	`nil`

Use RawConfig as an escape hatch when you need native Chart.js settings that are not covered by the simplified API. When set, templui forwards that config directly to Chart.js and ignores the helper props above.

Menu

Getting Started

Components

Chart

Installation

Examples

API Reference

Chart