Back

LineChart

Single Series (with area fill)

Monthly Active Users

0 1000 2000 3000 4000Users - Jan: 1200Users - Feb: 1900Users - Mar: 1500Users - Apr: 2400Users - May: 2200Users - Jun: 3100Users - Jul: 2800Users - Aug: 3600JanFebMarAprMayJunJulAug

Multi-series

Revenue vs Expenses

0 20000 40000 60000 80000Revenue - Q1: 42000Revenue - Q2: 58000Revenue - Q3: 51000Revenue - Q4: 74000Expenses - Q1: 31000Expenses - Q2: 38000Expenses - Q3: 35000Expenses - Q4: 44000Q1Q2Q3Q4
Revenue
Expenses

Usage

@display.LineChart(display.LineChartProps{
    Title:  "Monthly Active Users",
    Height: 220,            // SVG height in px (default 220)
    Labels: []string{"Jan", "Feb", "Mar"},
    Series: []display.LineChartSeries{
        {
            Label:  "Users",
            Points: []float64{1200, 1900, 1500},
            Color:  "#3b82f6",
            Fill:   true,  // shade area under line
        },
    },
})