Chart - Line

A multi-series Line chart showing average monthly temperatures for two cities. Line charts are ideal for visualizing trends over time.

---

Source Code

<Chart ChartWidth="600px" ChartHeight="400px">
    <ChartTitle Text="Average Monthly Temperature (°F)" />
    <ChartLegend Name="Default" />
    <ChartArea Name="TempArea"
        AxisX="@(new Axis { Title = "Month" })"
        AxisY="@(new Axis { Title = "Temperature (°F)" })" />
    <ChartSeries Name="New York"
        ChartType="SeriesChartType.Line"
        ChartArea="TempArea"
        Points="@NewYorkTemps" />
    <ChartSeries Name="Los Angeles"
        ChartType="SeriesChartType.Line"
        ChartArea="TempArea"
        Points="@LosAngelesTemps" />
</Chart>

@code {

    private List<DataPoint> NewYorkTemps = new()
    {
        new() { XValue = "Jan", YValues = new[] { 33.0 } },
        new() { XValue = "Feb", YValues = new[] { 35.0 } },
        // ... more months
    };

    private List<DataPoint> LosAngelesTemps = new()
    {
        new() { XValue = "Jan", YValues = new[] { 58.0 } },
        new() { XValue = "Feb", YValues = new[] { 59.0 } },
        // ... more months
    };

}