charts

Documentation

Overview

Package charts provides data visualization components using Chart.js.

Index

• Variables
• func AreaChart(data AreaChartData) templ.Component
• func BarChart(data BarChartData) templ.Component
• func DoughnutChart(data DoughnutChartData) templ.Component
• func LineChart(data LineChartData) templ.Component
• func PieChart(data PieChartData) templ.Component
• type AreaChartData
• type BarChartData
• type ChartOptions
  • func DefaultOptions() ChartOptions
• type Charts
  • func New() *Charts
  • func (c *Charts) AlpineComponents() []plugin.AlpineComponent
  • func (c *Charts) Directives() []plugin.AlpineDirective
  • func (c *Charts) Init(ctx context.Context, registry *plugin.Registry) error
  • func (c *Charts) Magics() []plugin.AlpineMagic
  • func (c *Charts) Scripts() []plugin.Script
  • func (c *Charts) Stores() []plugin.AlpineStore
• type DatasetConfig
• type DoughnutChartData
• type LineChartData
• type PieChartData

Variables

var BorderColors = []string{
	"rgb(59, 130, 246)",
	"rgb(34, 197, 94)",
	"rgb(234, 179, 8)",
	"rgb(239, 68, 68)",
	"rgb(168, 85, 247)",
	"rgb(236, 72, 153)",
	"rgb(14, 165, 233)",
	"rgb(251, 146, 60)",
}

BorderColors provides border colors matching DefaultColors.

var DefaultColors = []string{
	"rgba(59, 130, 246, 0.8)",
	"rgba(34, 197, 94, 0.8)",
	"rgba(234, 179, 8, 0.8)",
	"rgba(239, 68, 68, 0.8)",
	"rgba(168, 85, 247, 0.8)",
	"rgba(236, 72, 153, 0.8)",
	"rgba(14, 165, 233, 0.8)",
	"rgba(251, 146, 60, 0.8)",
}

DefaultColors provides a default color palette for charts.

Functions

func AreaChart

func AreaChart(data AreaChartData) templ.Component

AreaChart creates an area chart with the given data.

func BarChart

func BarChart(data BarChartData) templ.Component

BarChart creates a bar chart with the given data.

func DoughnutChart

func DoughnutChart(data DoughnutChartData) templ.Component

DoughnutChart creates a doughnut chart with the given data.

func LineChart

func LineChart(data LineChartData) templ.Component

LineChart creates a line chart with the given data.

func PieChart

func PieChart(data PieChartData) templ.Component

PieChart creates a pie chart with the given data.

Types

type AreaChartData

type AreaChartData struct {
	Labels   []string
	Datasets []DatasetConfig
}

AreaChartData holds data for area charts.

type BarChartData

type BarChartData struct {
	Labels   []string
	Datasets []DatasetConfig
}

BarChartData holds data for bar charts.

type ChartOptions

type ChartOptions struct {
	// Title of the chart
	Title string

	// Width of the canvas (e.g., "400px", "100%")
	Width string

	// Height of the canvas (e.g., "300px")
	Height string

	// ShowLegend displays the legend
	ShowLegend bool

	// LegendPosition where to place the legend ("top", "bottom", "left", "right")
	LegendPosition string

	// ShowTooltip enables tooltips on hover
	ShowTooltip bool

	// MaintainAspectRatio maintains aspect ratio when resizing
	MaintainAspectRatio bool

	// Animated enables chart animations
	Animated bool
}

ChartOptions holds common configuration for all chart types.

func DefaultOptions

func DefaultOptions() ChartOptions

DefaultOptions returns default chart options.

type Charts

type Charts struct {
	*plugin.ComponentPluginBase
	// contains filtered or unexported fields
}

Charts plugin implements Component and Alpine plugins.

func New

func New() *Charts

New creates a new Charts plugin.

func (*Charts) AlpineComponents

func (c *Charts) AlpineComponents() []plugin.AlpineComponent

AlpineComponents returns Alpine.data components.

func (*Charts) Directives

func (c *Charts) Directives() []plugin.AlpineDirective

Directives returns custom Alpine directives.

func (*Charts) Init

func (c *Charts) Init(ctx context.Context, registry *plugin.Registry) error

Init initializes the charts plugin.

func (*Charts) Magics

func (c *Charts) Magics() []plugin.AlpineMagic

Magics returns custom magic properties.

func (*Charts) Scripts

func (c *Charts) Scripts() []plugin.Script

Scripts returns Chart.js library.

func (*Charts) Stores

func (c *Charts) Stores() []plugin.AlpineStore

Stores returns Alpine stores.

type DatasetConfig

type DatasetConfig struct {
	Label           string
	Data            []float64
	BackgroundColor any // string or []string
	BorderColor     any // string or []string
	BorderWidth     int
	Fill            bool
	Tension         float64 // For line charts (curve smoothness)
}

DatasetConfig holds configuration for a dataset.

type DoughnutChartData

type DoughnutChartData struct {
	Labels          []string
	Data            []float64
	BackgroundColor []string
	BorderColor     []string
	BorderWidth     int
}

DoughnutChartData holds data for doughnut charts.

type LineChartData

type LineChartData struct {
	Labels   []string
	Datasets []DatasetConfig
}

LineChartData holds data for line charts.

type PieChartData

type PieChartData struct {
	Labels          []string
	Data            []float64
	BackgroundColor []string
	BorderColor     []string
	BorderWidth     int
}

PieChartData holds data for pie charts.