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",
},
},
},
})
}
}
}