charts

Documentation

Overview

Package charts provides data visualization components using Chart.js.

The charts plugin provides beautiful, responsive charts that integrate seamlessly with ForgeUI's theme system.

Basic Usage

registry := plugin.NewRegistry()
registry.Use(charts.New())

Available Charts

• LineChart - Time series and trends
• BarChart - Categorical comparisons
• PieChart - Proportional data
• AreaChart - Filled line charts
• DoughnutChart - Hollow pie charts

Features

• Responsive sizing
• Theme integration (matches ForgeUI colors)
• Animation configuration
• Legend positioning
• Tooltip formatting
• Data point styling

Index

• Variables
• func AreaChart(data AreaChartData) g.Node
• func BarChart(data BarChartData) g.Node
• func DoughnutChart(data DoughnutChartData) g.Node
• func LineChart(data LineChartData) g.Node
• func PieChart(data PieChartData) g.Node
• 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) g.Node

AreaChart creates an area chart with the given data.

Example:

charts.AreaChart(charts.AreaChartData{
    Labels: []string{"Week 1", "Week 2", "Week 3", "Week 4"},
    Datasets: []charts.DatasetConfig{
        {
            Label: "Active Users",
            Data: []float64{1200, 1900, 1500, 2100},
            BorderColor: "rgb(59, 130, 246)",
            BackgroundColor: "rgba(59, 130, 246, 0.3)",
            BorderWidth: 2,
            Tension: 0.4,
        },
    },
})

func BarChart

func BarChart(data BarChartData) g.Node

BarChart creates a bar chart with the given data.

Example:

charts.BarChart(charts.BarChartData{
    Labels: []string{"Q1", "Q2", "Q3", "Q4"},
    Datasets: []charts.DatasetConfig{
        {
            Label: "Revenue",
            Data: []float64{45000, 52000, 48000, 61000},
            BackgroundColor: charts.DefaultColors[0],
            BorderColor: charts.BorderColors[0],
            BorderWidth: 1,
        },
    },
})

func DoughnutChart

func DoughnutChart(data DoughnutChartData) g.Node

DoughnutChart creates a doughnut chart with the given data.

Example:

charts.DoughnutChart(charts.DoughnutChartData{
    Labels: []string{"Development", "Marketing", "Sales", "Operations"},
    Data: []float64{35, 25, 20, 20},
    BackgroundColor: charts.DefaultColors,
    BorderColor: charts.BorderColors,
    BorderWidth: 2,
})

func LineChart

func LineChart(data LineChartData) g.Node

LineChart creates a line chart with the given data.

Example:

charts.LineChart(charts.LineChartData{
    Labels: []string{"Jan", "Feb", "Mar", "Apr"},
    Datasets: []charts.DatasetConfig{
        {
            Label: "Sales",
            Data: []float64{12, 19, 3, 5},
            BorderColor: "rgb(59, 130, 246)",
            BackgroundColor: "rgba(59, 130, 246, 0.2)",
            Tension: 0.4,
        },
    },
})

func PieChart

func PieChart(data PieChartData) g.Node

PieChart creates a pie chart with the given data.

Example:

charts.PieChart(charts.PieChartData{
    Labels: []string{"Chrome", "Firefox", "Safari", "Edge"},
    Data: []float64{55.2, 18.7, 15.3, 10.8},
    BackgroundColor: charts.DefaultColors,
    BorderColor: charts.BorderColors,
    BorderWidth: 1,
})

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.