Line Charts

Line chart components with support for smooth curves, dots, and multiple series.

Default

A basic line chart with smooth monotone curves.

Line Chart

January - June 2024

JanFebMarAprMayJun
Desktop
Mobile
// Config
var config = new ChartConfig
{
    ["desktop"] = new ChartConfigEntry { Label = "Desktop", Color = "hsl(var(--chart-1))" },
    ["mobile"]  = new ChartConfigEntry { Label = "Mobile",  Color = "hsl(var(--chart-2))" }
};

// Data
var data = new List<Dictionary<string, object>>
{
    new() { ["month"] = "January",  ["desktop"] = 186, ["mobile"] = 80 },
    new() { ["month"] = "February", ["desktop"] = 305, ["mobile"] = 200 },
    // ...
}.Cast<object>().ToList();

// Lines animate in with a draw effect by default (Animate="true").
<ChartContainer Config="@config" Class="h-[300px]">
    <LineChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <Line DataKey="desktop" Stroke="var(--color-desktop)" />
        <Line DataKey="mobile" Stroke="var(--color-mobile)" />
        <ChartTooltip />
    </LineChart>
    <ChartLegend />
</ChartContainer>

Linear

A line chart with linear interpolation and no dots.

Line Chart - Linear

Using linear curve type

JanFebMarAprMayJun 0100200300400 
// Use Type="CurveType.Linear" for straight line segments.
// Dot="false" hides the data point markers.
<ChartContainer Config="@config" Class="h-[300px]">
    <LineChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <YAxis TickLine="false" AxisLine="false" />
        <Line DataKey="desktop" Type="CurveType.Linear"
              Stroke="var(--color-desktop)" Dot="false" />
        <ChartTooltip />
    </LineChart>
</ChartContainer>