The LineChart component renders smooth line charts ideal for showing trends, progress, and changes over time. Built on ApexCharts.Blazor with Curve.Smooth and rounded line caps.

Installation

shellui add chart line-chart
dotnet add package Blazor-ApexCharts

chart and chart-variants are auto-installed as dependencies.

Basic Usage

<LineChart TItem="TrafficData"
    Data="@trafficData"
    Title="Website Traffic"
    Name="Visitors"
    XValue="@(e => e.Date)"
    YValue="@(e => (decimal?)e.Visitors)"
    Theme="ChartTheme.Default"
    Height="350px" />

@code {
    private List<TrafficData> trafficData = new()
    {
        new("Mon", 1200), new("Tue", 1900),
        new("Wed", 1500), new("Thu", 2100),
        new("Fri", 1800), new("Sat", 900),
        new("Sun", 750)
    };

    record TrafficData(string Date, int Visitors);
}

Performance Metrics

<LineChart TItem="PerformanceData"
    Data="@perfData"
    Title="API Response Times"
    Subtitle="Last 7 days (ms)"
    Name="Avg Response Time"
    XValue="@(e => e.Day)"
    YValue="@(e => (decimal?)e.ResponseMs)"
    Theme="ChartTheme.Default"
    Height="350px" />

@code {
    private List<PerformanceData> perfData = new()
    {
        new("Mon", 120), new("Tue", 95), new("Wed", 180),
        new("Thu", 110), new("Fri", 88), new("Sat", 65), new("Sun", 72)
    };

    record PerformanceData(string Day, int ResponseMs);
}

Stock Price Trend

<LineChart TItem="StockPrice"
    Data="@stockData"
    Title="Stock Price (ACME)"
    Subtitle="30-day trend"
    Name="Price (USD)"
    XValue="@(e => e.Date)"
    YValue="@(e => (decimal?)e.Price)"
    Theme="ChartTheme.Colorful"
    Height="400px" />

@code {
    private List<StockPrice> stockData = new()
    {
        new("Week 1", 142.50m), new("Week 2", 148.20m),
        new("Week 3", 145.80m), new("Week 4", 155.30m),
        new("Week 5", 152.10m), new("Week 6", 161.40m)
    };

    record StockPrice(string Date, decimal Price);
}

Multiple Lines

For multiple lines, use Multi-Series Chart with SeriesType.Line.

API Reference

Property	Type	Default	Description
`TItem`	Generic type	—	The data item type
`Data`	`IEnumerable<TItem>?`	`null`	Data collection to visualize
`Name`	`string`	`"Data"`	Series name shown in tooltip
`XValue`	`Func<TItem, object>?`	`null`	Function to extract X-axis value
`YValue`	`Func<TItem, decimal?>?`	`null`	Function to extract Y-axis value
`Theme`	`ChartTheme`	`Default`	Color theme (Default, Colorful, Monochrome)
`Title`	`string?`	`null`	Chart title
`Subtitle`	`string?`	`null`	Chart subtitle
`Height`	`string?`	`"400px"`	Chart height
`Width`	`string?`	`"100%"`	Chart width
`Class`	`string?`	`null`	Additional CSS classes

Line Chart