Chart

Beautiful charts. Built using Chart.js.

TailwindCSS

Vanilla JS

package showcase

import (
	"github.com/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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

Install the component
```
templui add chart
```
Add the JavaScript to your layout
```
@chart.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Bar Chart - Multiple

package showcase

import (
	"github.com/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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,
						},
					},
				},
			})
		}
	}
}

Area Chart

package showcase

import (
	"github.com/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/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`	`{}`
`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`
`Class` Additional CSS classes to apply to the chart container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the chart container	`templ.Attributes`	`nil`

Getting Started

Components

Chart

Installation

Examples

API Reference

Chart