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>
import "github.com/templui/templui/components/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 |
|---|---|---|
Unique identifier for the chart element | | |
Type of chart to render | | |
Chart data configuration including labels and datasets | | |
Chart configuration options | | |
Passes a JSON-serializable Chart.js config through directly and bypasses the helper props | | |
Whether to display the chart legend | | |
Whether to display the X-axis | | |
Whether to display the Y-axis | | |
Whether to display X-axis labels | | |
Whether to display Y-axis labels | | |
Whether to display X-axis grid lines | | |
Whether to display Y-axis grid lines | | |
Whether to render the chart horizontally | | |
Whether to stack chart elements | | |
Minimum value for the Y-axis scale | | |
Maximum value for the Y-axis scale | | |
Whether the Y-axis should start at zero. Defaults to true if not specified | | |
Additional CSS classes to apply to the chart container | | |
Additional HTML attributes to apply to the chart container | | |
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.