Line & Area Charts

Basic Line Chart

page.ApexChart(chart => {
    chart.Title.Text("Sales Trend");

    chart.AddLine("Jan", 30)
         .AddLine("Feb", 40)
         .AddLine("Mar", 35)
         .AddLine("Apr", 50)
         .AddLine("May", 49)
         .AddLine("Jun", 60);

    chart.Stroke(s => s.SetCurve(ApexCurve.Smooth).SetWidth(3))
         .DataLabels(d => d.Enable(false));
});

Area Chart

page.ApexChart(chart => {
    chart.Title.Text("Revenue Over Time");

    chart.AddArea("Jan", 120)
         .AddArea("Feb", 160)
         .AddArea("Mar", 145)
         .AddArea("Apr", 190)
         .AddArea("May", 210)
         .AddArea("Jun", 235);

    chart.Stroke(s => s.SetCurve(ApexCurve.Smooth).SetWidth(2))
         .Fill(f => f.SetType(ApexFillType.Gradient)
                     .SetGradient(g => g.SetShade(ApexGradientShade.Dark)
                                       .SetType(ApexGradientType.Vertical)
                                       .SetOpacityRange(0.5, 0.1)))
         .DataLabels(d => d.Enable(false));
});

Multiple Series

page.ApexChart(chart => {
    chart.Title.Text("Comparison");

    chart.AddSeries("2024", 44, 55, 57, 56, 61, 58)
         .AddSeries("2025", 76, 85, 101, 98, 87, 105);

    chart.Stroke(s => s.SetCurve(ApexCurve.Smooth).SetWidth(2))
         .Colors(RGBColor.Blue, RGBColor.Green)
         .Legend(l => l.ShowLegend(true).Position(ApexPosition.Top));
});

Configuration Options

• Title — chart.Title.Text("...")
• Colors — chart.Colors(...)
• Legend — chart.Legend(...)
• Data Labels — chart.DataLabels(...)
• Grid — chart.Grid(...)
• Stroke — chart.Stroke(...)
• Axes — chart.XAxis(...) , chart.YAxis(...)
• Fill — chart.Fill(...)