# chart-line
> Multi-series line chart compares annual crude steel production by country with date axes, markers, and tooltips.
**Framework:** blazor **Component:** Chart **Variant:** line
## Get this item
**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:
```
GET https://ai.syncfusion.com/r/blazor/chart-line.json
```
**Install Package(s)**
```bash
dotnet add package Syncfusion.Blazor.Charts
```
**Notes**
- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md
## Source files
### src/components/chart-line/Chart.razor
```razor
@page "/chart/line"
@using Syncfusion.Blazor.Charts
@code{
public string Width { get; set; } = "90%";
public class ChartData
{
public DateTime X { get; set; }
public double Y { get; set; }
}
public List VietnamData = new List
{
new ChartData { X = new DateTime(2016, 01, 01), Y = 7.8 },
new ChartData { X = new DateTime(2017, 01, 01), Y = 10.3 },
new ChartData { X = new DateTime(2018, 01, 01), Y = 15.5 },
new ChartData { X = new DateTime(2019, 01, 01), Y = 17.5 },
new ChartData { X = new DateTime(2020, 01, 01), Y = 19.5 },
new ChartData { X = new DateTime(2021, 01, 01), Y = 23.0 },
new ChartData { X = new DateTime(2022, 01, 01), Y = 20.0 },
new ChartData { X = new DateTime(2023, 01, 01), Y = 19.0 },
new ChartData { X = new DateTime(2024, 01, 01), Y = 22.1 }
};
public List IndonesiaData = new List
{
new ChartData { X = new DateTime(2016, 01, 01), Y = 4.8 },
new ChartData { X = new DateTime(2017, 01, 01), Y = 5.2 },
new ChartData { X = new DateTime(2018, 01, 01), Y = 6.2 },
new ChartData { X = new DateTime(2019, 01, 01), Y = 7.8 },
new ChartData { X = new DateTime(2020, 01, 01), Y = 9.3 },
new ChartData { X = new DateTime(2021, 01, 01), Y = 14.3 },
new ChartData { X = new DateTime(2022, 01, 01), Y = 15.6 },
new ChartData { X = new DateTime(2023, 01, 01), Y = 16.0 },
new ChartData { X = new DateTime(2024, 01, 01), Y = 17.0 }
};
public List FranceData = new List
{
new ChartData { X = new DateTime(2016, 01, 01), Y = 14.6 },
new ChartData { X = new DateTime(2017, 01, 01), Y = 15.5 },
new ChartData { X = new DateTime(2018, 01, 01), Y = 15.4 },
new ChartData { X = new DateTime(2019, 01, 01), Y = 14.4 },
new ChartData { X = new DateTime(2020, 01, 01), Y = 11.6 },
new ChartData { X = new DateTime(2021, 01, 01), Y = 13.9 },
new ChartData { X = new DateTime(2022, 01, 01), Y = 12.1 },
new ChartData { X = new DateTime(2023, 01, 01), Y = 10.0 },
new ChartData { X = new DateTime(2024, 01, 01), Y = 10.8 }
};
public List PolandData = new List
{
new ChartData { X = new DateTime(2016, 01, 01), Y = 8.9 },
new ChartData { X = new DateTime(2017, 01, 01), Y = 10.3 },
new ChartData { X = new DateTime(2018, 01, 01), Y = 10.8 },
new ChartData { X = new DateTime(2019, 01, 01), Y = 9.0 },
new ChartData { X = new DateTime(2020, 01, 01), Y = 7.9 },
new ChartData { X = new DateTime(2021, 01, 01), Y = 8.5 },
new ChartData { X = new DateTime(2022, 01, 01), Y = 7.4 },
new ChartData { X = new DateTime(2023, 01, 01), Y = 6.4 },
new ChartData { X = new DateTime(2024, 01, 01), Y = 7.1 }
};
public List MexicoData = new List
{
new ChartData { X = new DateTime(2016, 01, 01), Y = 19.0 },
new ChartData { X = new DateTime(2017, 01, 01), Y = 20.0 },
new ChartData { X = new DateTime(2018, 01, 01), Y = 20.2 },
new ChartData { X = new DateTime(2019, 01, 01), Y = 18.4 },
new ChartData { X = new DateTime(2020, 01, 01), Y = 16.8 },
new ChartData { X = new DateTime(2021, 01, 01), Y = 18.5 },
new ChartData { X = new DateTime(2022, 01, 01), Y = 18.4 },
new ChartData { X = new DateTime(2023, 01, 01), Y = 16.3 },
new ChartData { X = new DateTime(2024, 01, 01), Y = 13.7 }
};
}
```